前端工作流自动化构建工具

什么是 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  回车 完成打包

实例效果
实例代码