前端自动化与gulp

为什么需要前端自动化

先来说说为什么要自动化。凡是要考虑到自动化时，你所做的工作必然是存在很多重复乏味的劳作，很有必要通过程序来完成这些任务。这样一来就可以解放生产力，将更多的精力和时间投入到更多有意义的事情上。随着前端开发不再是简单的作坊式作业，而成为一个复杂的工程时（日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪），还涉及到性能优化一系列工作等等，这时自动化已然是迫切的需求。

什么是gulp

gulp是基于流的前端自动化构建工具，它可以解决前端中很多其实并不需要人力参与的工作。

gulp的作用

1. 编译 sass
2. 合并优化压缩 css
3. 校验压缩 js
4. 优化图片
5. 添加文件指纹（md5）
6. 组件化头部底部（include html）
7. 实时自动刷新…

总之，gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。

如何使用gulp完成自动化任务

gulp入门指南

1. 安装node.js并重启计算机
2. 全局安装gulp

$ npm install --global gulp

3. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

4. 在项目根目录下创建一个名为gulpfile.js的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

5. 运行 gulp：

$ gulp

gulp常用插件

匹配符 、*、！、{}

gulp.src('./js/*.js')               // * 匹配js文件夹下所有.js格式的文件
gulp.src('./js/**/*.js')            // ** 匹配js文件夹的0个或多个子文件夹
gulp.src(['./js/*.js','!./js/index.js'])    // ! 匹配除了index.js之外的所有js文件
gulp.src('./js/**/{omui,common}.js')        // {} 匹配{}里的文件名

文件操作

del (替代gulp-clean)

var del = require('del');

del('./dist');                      // 删除整个dist文件夹

• gulp-clean
  删除文件及文件夹，在执行打包的时候，一般都需要先清理目标文件夹，以保证每次打包时，都是最新的文件。

var gulp = require('gulp'),
clean = require('gulp-clean'),
pump = require('pump');

gulp.task('clean', function(cb) {
pump([
gulp.src('./dist'),
clean()
], cb)
})

• gulp-rename
  重命名文件。

var rename = require("gulp-rename");

gulp.src('./hello.txt')
  .pipe(rename('gb/goodbye.md'))    // 直接修改文件名和路径
  .pipe(gulp.dest('./dist')); 
 
gulp.src('./hello.txt')
  .pipe(rename({
    dirname: "text",                // 路径名
    basename: "goodbye",            // 主文件名
    prefix: "pre-",                 // 前缀
    suffix: "-min",                 // 后缀
    extname: ".html"                // 扩展名
  }))
  .pipe(gulp.dest('./dist'));

• gulp-concat
  合并文件。

var concat = require('gulp-concat');

gulp.src('./js/*.js')
    .pipe(concat('all.js'))         // 合并all.js文件
    .pipe(gulp.dest('./dist'));
    
gulp.src(['./js/demo1.js','./js/demo2.js','./js/demo2.js'])
    .pipe(concat('all.js'))         // 按照[]里的顺序合并文件
    .pipe(gulp.dest('./dist'));

• gulp-filter
  gulp.filter可以虚拟文件流中过滤特定的文件，可以当做是gulp.src的二次过滤，并且还可以restore操作恢复过滤前的gulp.src一次过滤的虚拟文件流。

var filter = require('gulp-filter');

const f = filter(['**', '!*/index.js']);
gulp.src('js/**/*.js')
    .pipe(f)                        // 过滤掉index.js这个文件
    .pipe(gulp.dest('dist'));

const f1 = filter(['**', '!*/index.js'], {restore: true});
gulp.src('js/**/*.js')
    .pipe(f1)                       // 过滤掉index.js这个文件
    .pipe(uglify())                 // 对其他文件进行压缩
    .pipe(f1.restore)               // 返回到未过滤执行的所有文件
    .pipe(gulp.dest('dist'));       // 再对所有文件操作，包括index.js

• gulp-uglify
  压缩js文件大小。

var uglify = require("gulp-uglify");

gulp.src('./hello.js')
    .pipe(uglify())                 // 直接压缩hello.js
    .pipe(gulp.dest('./dist'))
    
 gulp.src('./hello.js')
    .pipe(uglify({
        mangle: true,               // 是否修改变量名，默认为 true
        compress: true,             // 是否完全压缩，默认为 true
        preserveComments: 'all'     // 保留所有注释
    }))
    .pipe(gulp.dest('./dist'))

• gulp-csso
  压缩优化css。

var csso = require('gulp-csso');

gulp.src('./css/*.css')
    .pipe(csso())
    .pipe(gulp.dest('./dist/css'))

• gulp-html-minify
  压缩HTML。

var htmlminify = require('gulp-html-minify');

gulp.src('index.html')
    .pipe(htmlminify())
    .pipe(gulp.dest('./dist'))

• gulp-imagemin
  压缩图片。

var imagemin = require('gulp-imagemin');

gulp.src('./img/*.{jpg,png,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'))

• gulp-zip
  ZIP压缩文件。

var zip = require('gulp-zip');

gulp.src('./src/*')
    .pipe(zip('all.zip'))                   // 压缩成all.zip文件
    .pipe(gulp.dest('./dist'))

JS/CSS自动注入

• gulp-autoprefixer
  自动为css添加浏览器前缀。

var autoprefixer = require('gulp-autoprefixer');

gulp.src('./css/*.css')
    .pipe(autoprefixer())           // 直接添加前缀
    .pipe(gulp.dest('dist'))

gulp.src('./css/*.css')
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],      // 浏览器版本
        cascade：true                       // 美化属性，默认true
        add: true                           // 是否添加前缀，默认true
        remove: true                        // 删除过时前缀，默认true
        flexbox: true                       // 为flexbox属性添加前缀，默认true
    }))
    .pipe(gulp.dest('./dist'))

• gulp-useref
  把html里零碎的这些引入合并成一个文件，但是它不负责代码压缩。

// index.html

<!-- build:css /css/all.css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

// gulpfile.js

var useref = require('gulp-useref');

gulp.src('index.html')
    .pipe(useref())
    .pipe(gulp.dest('./dist'))

替换之后的index.html中就会变成：

<link rel="stylesheet" href="css/all.css">  // 之前的两个<link>替换成一个了

• gulp-rev
  给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css，用以控制静态资源的缓存

var rev = require('gulp-rev');

gulp.src('./css/*.css')
    .pipe(rev())
    .pipe(gulp.dest('./dist/css'))

• gulp-rev-replace
  重写被gulp-rev重命名的文件名。

var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');

gulp.src('index.html')
    .pipe(useref())                         // 替换HTML中引用的css和js
    .pipe(rev())                            // 给css,js,html加上hash版本号
    .pipe(revReplace())                     // 把引用的css和js替换成有版本号的名字
    .pipe(gulp.dest('./dist'))

• gulp-html-replace
  替换html中的构建块。

// index.html

<!-- build:css -->                          // css是buildName,可以自己定义
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

// gulpfile.js

var htmlreplace = require('gulp-html-replace');

gulp.src('index.html')
    .pipe(htmlreplace({
        'css':'all.css'                     // css是index.html中定义的buildName
    }))
    .pipe(gulp.dest('./dist'))

替换之后的index.html中就会变成：

<link rel="stylesheet" href="all.css">      // 之前的两个<link>替换成一个了

流控制

• gulp-if
  有条件地运行一个任务。

var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var condition = true; 

gulp.src('./js/*.js')
    .pipe(gulpif(condition, uglify(), concat('all.js')))  // condition为true时执行uglify(), else 执行concat('all.js')
    .pipe(gulp.dest('./dist/'));

工具

• gulp-load-plugins
  从包的依赖和附件里加载gulp插件到一个对象里给你选择。

// package.json 

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.1"
}

// gulpfile.js

var $ = require('gulp-load-plugins')();     // $ 是一个对象,加载了依赖里的插件

gulp.src('./**/*.js')
    .pipe($.concat('all.js'))               // 使用插件就可以用$.PluginsName()
    .pipe($.uglify())
    .pipe($.rename('all.min.js'))
    .pipe(gulp.dest('./dist'))

• gulp-sass
  编译sass。

var sass = require('gulp-sass');

gulp.src('./sass/**/*.scss')
    .pipe(sass({
        outputStyle: 'compressed'           // 配置输出方式,默认为nested
    }))
    .pipe(gulp.dest('./dist/css'));
    
gulp.watch('./sass/**/*.scss', ['sass']);   // 实时监听sass文件变动,执行sass任务

• gulp-babel
  将ES6代码编译成ES5。

var babel = require('gulp-babel');

gulp.src('./js/index.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'))

• gulp-livereload
  当监听文件发生变化时，浏览器自动刷新页面。

• gulp-plumber
  这个插件的作用简单来说就是一旦pipe中的某一steam报错了，保证下面的steam还继续执行。因为pipe默认的onerror函数会把剩下的stream给unpipe掉，这个插件阻止了这种行为。

• gulp-util
  gulp常用的工具库
  gulp-util带有很多方便的函数，其中最常用的应该就是log了。$.util.log()支持传入多个参数，打印结果会将多个参数用空格连接起来。它与console.log的区别就是所有$.util.log的结果会自动带上时间前缀。另外，它还支持颜色，如$.util.log($.util.colors.magenta('123'));打印出来的123是品红色的。其实$.util.colors就是一个chalk的实例，而chalk是专门用来处理命令行打印着色的一个工具。

• webpack-stream
  以流的方式运行webpack用以方便的gulp进行集成

• yargs
  用于获取命令行参数，针对不同参数，切换任务执行过程时需要

• gulp-live-server
  方便的，轻量级的服务器