先标个目录:
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/*
------------------正文结束
乍已看完是不特枯燥?没关系,我写的时候也一样....
领取专属 10元无门槛券
私享最新 技术干货