GULP——前端自动化

先标个目录:

1.概述

2.说明

3.配置node环境

4.配置gulp环境

5项目配置

------------------正文开始

1.概述

gulp是一个前端自动化工具,如html、css和js代码的压缩、合并、混淆等,当然也可以自动去除console信息,虽然这些操作可以通过一些在线工具帮我们实现,但不断重复地复制粘贴肯定比不上一句命令来得方便,编写gulp任务可以大大提高开发效率。

2.说明

gulp依赖于node环境,使用gulp必须先安装好node。gulp本身是一个轻量化内核,自身拥有的api不多,很多功能需要依赖插件完成。关于html、css和js代码压缩的插件有三个,分别是gulp-htmlmin、gulp-cssnano、gulp-uglify,这三个插件的具体说明可以在npm的官网npmjs.com上查看,去除console.log信息插件是gulp-strip-debug。

3.配置node环境

3.1下载对应你系统的Node.js版本https://nodejs.org/en/download/

3.2下载完成后双击“node-v6.9.2-x64.msi”,开始安装Node.js,安装到个人PC指定安装目录或使用默认目录

3.3环境配置

3.4安装检测

WIN+R打开命令窗口,输入cmd打开,输入node -v,有输出安装版本即代表安装成功,如没有,请检查是否已完成安装即环境变量配置是否正确(请注意当前PC使用的是系统用户和登录用户)

特别说明:新版的node环境已自带npm,安装的时候会被一起安装,可免安装npm,若使用的是老版的node环境请自行选择安装npm环境。cmd窗口下输入npm -v有版本号即代表已安装好(npm的作用就是对node.js依赖的包进行管理)。

4.配置gulp环境

4.1安装

npm install -g gulp

4.2检查安装

gulp -v

出现版本号则代表安装成功,如图

4.3在项目指定要压缩的地方安装gulp

npminstall –save-dev gulp

4.4在项目根目录下创建gulpfile.js文件,增加如下代码:

// 获取 gulp

var gulp= require('gulp');

// 获取 uglify 模块(用于压缩 JS)

varuglify = require('gulp-uglify');

// 获取babel模块

varbabel = require("gulp-babel");

// 获取debug模块

varstripDebug = require('gulp-strip-debug');

// 获取 cleancss 模块(用于压缩 CSS)

varcleanCSS = require('gulp-clean-css');

varrename = require("gulp-rename");

// 压缩 js 文件 在命令行使用 gulp jscompress 启动此任务

gulp.task('jscompress',function() {

// 1. 找到文件(带有!表示需要排除的文件及目录)

returngulp.src(['js/*.js','!js/jquery-validate.js','!js/chat/nim','!js/chat/nim/**','!js/highcharts','!js/highcharts/**','!js/**/*.min.js','js/**/*.js'])

// .pipe(rename())

.pipe(babel({

presets: ['es2015'] // es5检查机制

}))

// 2. 压缩文件

.pipe(uglify())

.on('error', function(err) {

})

// 去除console.log记录

.pipe(stripDebug())

// 3. 另存压缩后的文件

.pipe(gulp.dest('dist/js'));

});

// 压缩 css 文件 在命令行使用 gulp csscompress 启动此任务

gulp.task('csscompress',function() {

// 1. 找到文件

returngulp.src(['statics/css/*.css','statics/css/**/*.css','!statics/css/patterns','!statics/css/*.min.css','!statics/css/**/*.min.css'])

// 2. 压缩文件

.pipe(cleanCSS())

// 3. 另存压缩后的文件

.pipe(gulp.dest('dist/statics/css'));

});

// 使用 gulp.task('default') 定义默认任务 在命令行使用 gulp 启动 script 任务和 css 任务

gulp.task('default',['jscompress','csscompress']);

4.5安装所需模块

npminstall gulp-uglify

npminstall gulp-babel

npminstall gulp-strip-debug

npminstall gulp-clean-css

npminstall gulp-rename

4.6执行压缩命令

压缩 js 文件,在命令行使用 gulp jscompress 启动此任务;

压缩 css 文件,在命令行使用 gulp csscompress 启动此任务;

默认任务,指定压缩js、css,在命令行使用 gulp 启动 script 任务和 css 任务。

5项目配置

由于node环境被整合进项目中,如果为web环境,则需要屏蔽node环境及gulp配置文件以减轻打包压力。

以下以maven项目示例,进入当前整合gulp的模块目录下pom.xml,注意以下红线标注部分为需要配置的关键信息。

maven-war-plugin

**/node_modules/**,

**/dist/**,

**/.babelrc,

**/gulpfile.js,

**/*.json

src/main/webapp

false

src/main/resources/$

WEB-INF/classes

true

src/main/resources

true

dev/*

test/*

prod/*

------------------正文结束

乍已看完是不特枯燥?没关系,我写的时候也一样....

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180717G0OJJI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券