参考链接：https://www.kancloud.cn/thinkphp/gulp-guide/43994
#安装gulp
gulp是基于Node.js的前端构建工具，所以首先需要安装nodejs。
nodejs安装：http://tzhennan.iteye.com/admin/blogs/2410483
#nodejs安装成功之后，使用npm安装全局gulp
$ npm install -g gulp
#在项目根目录下安装本地gulp
$ npm install -g gulp --save-dev
安装成功后在项目根目录下会多出 node_modules 文件夹
#gulp本身不提供js压缩合并等功能，需要使用gulp的相关插件
1、css压缩：gulp-clean-css
2、js压缩：gulp-uglify
3、js合并：gulp-concat
4、重命名：gulp-rename
5、js代码检测：gulp-jshint
6、图谱压缩：gulp-imagemin
#在项目根目录下执行命令安装以上插件
$ npm install gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-imagemin --save-dev
$ npm install jshint gulp-jshint --save-dev
ps：gulp-jshint和jshnt要一起安装
安装好的插件会出现在上面提到的node_modules文件夹中
#使用gulp
在gulpfile.js中添加以下代码
var gulp = require('gulp'),
cleanCSS = require('gulp-clean-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
imageMin = require('gulp-imagemin');
//语法检查
gulp.task('jshint', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//压缩css
gulp.task('minifycss', function() {
return gulp.src('css/*.css') //需要操作的文件
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(cleanCSS({compatibility: 'ie7'})) //执行压缩
.pipe(gulp.dest('css-min')); //输出文件夹
});
//压缩,合并 js
gulp.task('minifyjs', function() {
return gulp.src('js/*.js') //需要操作的文件
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('js')) //输出到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('js-min')); //输出
});
gulp.task('image',function(){
gulp.src('images/*.*')
.pipe(imageMin({progressive: true}))
.pipe(gulp.dest('images-min'))
})
//默认命令，在cmd中输入gulp后，执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task('default',['jshint'],function() {
gulp.start('minifycss','minifyjs');
});
#在项目根目录下执行gulp命令：
$ gulp
[20:43:30] Using gulpfile ~/project/html/gulpfile.js
[20:43:30] Starting 'jshint'...
[20:43:30] Finished 'jshint' after 60 ms
[20:43:30] Starting 'default'...
[20:43:30] Starting 'minifycss'...
[20:43:30] Starting 'minifyjs'...
[20:43:30] Finished 'default' after 3.24 ms
[20:43:30] Finished 'minifycss' after 134 ms
[20:43:30] Finished 'minifyjs' after 132 ms
现在可以在css-min文件夹中看到压缩好的css文件，在js-min中可以看到合并压缩好的main.min.js 。任务完成，只需要将html中css，js引用的路径修改成新的路径即可。