什么是 Gulp ？
它是前端自动化构建工作流的利器，可以使用多个插件实现代码打包、压缩、合并、检测、浏览器自动刷新等功能。
安装 Gulp
npm install -g gulp
如果报Error: EACCES, open '/Users/xxx/xxx.lock错误
先执行：sudo chown -R $(whoami) $HOME/.npm
如果使用npm安装插件太慢（被墙）,可执行 npm install -g cnpm --registry=https://registry.npm.taobao.org,先安装cnpm, 之后再安装插件时用cnpm安装cnpm install gulp
安装打包插件
npm install --save gulp gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint gulp-imagemin gulp-clean`
gulpfile.js 配置文件
var gulp = require('gulp');
// 引入插件
var minifycss = require('gulp-minify-css'), // CSS压缩
uglify = require('gulp-uglify'), // js压缩
concat = require('gulp-concat'), // 合并文件
rename = require('gulp-rename'), // 重命名
clean = require('gulp-clean'), // 清空文件夹
jshint = require('gulp-jshint'), // js代码规范性检查
imagemin = require('gulp-imagemin'); // 图片压缩
gulp.task('css', function(){
gulp.src('./css/*.css')
.pipe(concat('style.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('./dist/css'));
});
gulp.task('js', function(){
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('index.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('img', function(){
gulp.src('./images/*')
.pipe(imagemin({optimizationLevel:5}))
.pipe(gulp.dest('./dist/images'));
});
gulp.task('clear', function(){
gulp.src('dist/*',{ read: false})
.pipe(clean());
});
gulp.task('default', ['css', 'js', 'img']);
// 终端输入命令 gulp 回车 完成打包
