Gulpjs 前端构建工具

1、安装 Nodejs

https://nodejs.org/en/download/

2、安装gulp

gulp是基于Node.js的前端构建工具

npm install -g gulp

3、定位到项目

3.1、在项目根目录下安装本地gulp

npm install gulp --save-dev

3.2、安装插件

npm install gulp-watch gulp-compass gulp-sass gulp-htmlmin gulp-minify-css gulp-uglify gulp-concat gulp-rename jshint gulp-jshint del --save-dev

• gulp-watch

• sass的编译
  gulp-compass

• sass的编译
  gulp-sass

• html压缩
  gulp-htmlmin

• css压缩 　　
  gulp-minify-css

• js压缩　　　
  gulp-uglify

• js合并　　　
  gulp-concat

• 重命名　　
  gulp-rename

• js代码检测　
  gulp-jshint　(或gulp-jslint)

• 删除内容
  del

4、新建 gulpfile.js 文件，运行 Gulp

• 场景
  将sass目录下的scss文件，编译到css目录，再压缩重命名+min 到dist目录
  将src目录下的js文件，压缩重命名+min 到dist目录

var gulp      = require('gulp'),
    compass   = require('gulp-compass'),     //compass编译Sass
    sass      = require("gulp-sass"),        //sass编译
    htmlmin   = require('gulp-htmlmin'),     //HTML压缩
    minifycss = require('gulp-minify-css'),  //css压缩
    concat    = require('gulp-concat'),      //js合并
    uglify    = require('gulp-uglify'),      //js压缩
    rename    = require('gulp-rename'),      //重命名
    jshint    = require('gulp-jshint'),      //js代码检测
    del       = require('del');              //删除文件夹里的内容
// “src/a.js”：指定具体文件
// “*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)
//  “**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)
// “{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)
//  “!”：排除文件 例：!src/a.js(不包含src下的a.js文件)


//【1】语法检查
gulp.task('jshint', function () {
    return gulp.src('public/scripts/src/**/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'));
});

//【2】创建Compass任务，编译Sass生成到css、压缩css生成到dist
gulp.task('compass', function() {
    gulp.src('public/css/sass/**/*.scss')
            .pipe(compass({
                config_file: 'public/css/config.rb', // 配置文件
                css: 'public/css/css',      // 编译路径
                sass: 'public/css/sass'     // sass路径
            }))
            .pipe(gulp.dest('public/css/css'))  //输出到文件夹
            .pipe(minifycss())                  //压缩CSS
            .pipe(rename({suffix: '.min'}))     //rename压缩后的文件名
            .pipe(gulp.dest('public/css/dist')) // 发布到线上版本
            ;
});

//【3】压缩HTML
// 1.collapseWhitespace:从字面意思应该可以看出来，清除空格，压缩html，这一条比较重要，作用比较大，引起的改变压缩量也特别大；
// 2.collapseBooleanAttributes:省略布尔属性的值，比如：<input checked="checked"/>,那么设置这个属性后，就会变成 <input checked/>;
// 3.removeComments:清除html中注释的部分，我们应该减少html页面中的注释。
// 4.removeEmptyAttributes:清除所有的空属性，
// 5.removeSciptTypeAttributes:清除所有script标签中的type="text/javascript"属性。
// 6.removeStyleLinkTypeAttributes:清楚所有Link标签上的type属性。
// 7.minifyJS:压缩html中的javascript代码。
// 8.minifyCSS:压缩html中的css代码。
// gulp.task('html', function () {
//  var options = {
//      collapseWhitespace           : true,
//      collapseBooleanAttributes    : true,
//      removeComments               : false,
//      removeEmptyAttributes        : true,
//      removeScriptTypeAttributes   : true,
//      removeStyleLinkTypeAttributes: true,
//      minifyJS                     : true,
//      minifyCSS                    : true
//  };
//  gulp.src('app/**/*.html')
//          .pipe(htmlmin(options))
//          .pipe(gulp.dest('dest/'));
// });

//【4】压缩、合并 js
gulp.task('minifyjs', function () {
    return gulp.src('public/scripts/src/**/*.js') //需要操作的文件
            // .pipe(concat('main.js'))    //合并所有js到main.js
            // .pipe(gulp.dest('public/scripts/dist'))  //输出到文件夹
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('public/scripts/dist'));  //输出
});

//执行压缩前，先删除文件夹里的内容
gulp.task('clean', function(cb) {
    del(['public/scripts/dist/*', 'public/css/dist/*', 'public/css/css/*'], cb)
});

//【5】监视文件的变化
gulp.task('watch', function () {
    gulp.watch('public/scripts/src/**/*.js', ['jshint', 'minifyjs']);
    gulp.watch('public/css/sass/**/*.scss', ['compass']);
});

//【6】默认命令，在cmd中输入gulp后，执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task('default', ['jshint', 'minifyjs', 'compass', 'watch'], function () {
});