前端构建工具--Gulp

Gulp是用node.js写的一个前端构建工具。

可以用来sass转css，es6转es5，jade模板转html，图片压缩，同步文件，清除多余文件等工作。

1.安装

npm install -g gulp --save

2.Gulpfile.js配置

对于gulp的配置，主要方法有：

• gulp.src //来源
• gulp.dest //目标
• gulp.pipe //管道
• gulp.watch //监视文件系统，文件改动时自动处理
• gulp.task //任务

具体用法移步官网。

先看一个例子

//引入gulp和gulp-ruby-sass插件
var gulp = require('gulp')
    sass = require('gulp-ruby-sass');

//路径配置
const paths = {
    sass: 'app/**/*.scss',//匹配目录及其子目录的所有后缀名为scss的文件
    src: 'app'
};


//创建sass任务
gulp.task('sass', function () {
    return sass(paths.sass, {
        sourcemap: true,//sourcemap  信息文件  压缩后代码对应压缩前代码的位置
        stopOnError: true,  //除错
        compass: true  //压缩
    })
        .pipe(plumber())
        .on('error', sass.logError)
        .pipe(sourcemaps.write())   //生成sourcemap
        .pipe(sourcemaps.write('maps', {  
            includeContent: false,  //编译之后不包含源文件
            sourceRoot: 'source'  //includeContent: false 后设置的位置
        }))
        .pipe(gulp.dest(paths.src));//输出
});

//监听任务
gulp.task('watch', ['lint'], function () {
    //一旦发生变动，就运行指定的任务
    gulp.watch(paths.sass, ['sass']);
});

例子中，我们引入了gulp和gulp-ruby-sass，创建名为sass的任务，此任务对文件进行压缩，除错，生成sourcemap文件并输出。

我们甚至可以输出一个简单的操作指南。

gulp.task('help',function(){
    console.log('   gulp build          文件打包');
    console.log('   gulp watch          文件监控打包');
    console.log('   gulp help           gulp参数说明');
    console.log('   gulp server         测试server');
    console.log('   gulp -p             生产环境（默认生产环境）');
    console.log('   gulp -d             开发环境');
});

在控制台输入命令：gulp help

结果：

3.Gulpfile.js插件

了解了几只有用的插件。

var gulp = require('gulp'),
    //sass -> css
    sass = require('gulp-ruby-sass'),
    //jade ->  html
    jade = require('gulp-jade'),  
    //sass -> css
    sass = require('gulp-ruby-sass'), 
    //错误检查
    eslint = require('gulp-eslint'), 
    //处理JS时，生成SourceMap 
    sourcemaps = require('gulp-sourcemaps'),
    // 6to5  es6代码转换成es5代码
    babel = require('gulp-babel'), 
    //文件名加md5
    rev = require('gulp-rev'), 
    //rev之后的文件重写
    revReplace = require('gulp-rev-replace'),
    //清除无用文件
    clean = require('gulp-clean'),  
    //混淆js
    uglify = require('gulp-uglify'),
    //css压缩  
    minifyCss = require('gulp-minify-css'),
    //顺序控制流
    sequence = require('gulp-sequence'),
    //自动处理全部错误信息防止因为错误而导致 watch 不正常工作
    plumber = require('gulp-plumber'), 
     //文件连接 
    useref = require('gulp-useref'), 
    //if判断
    gulpIf = require('gulp-if'),
     //改名
    rename = require('gulp-rename');  

（1）gulp-sequence顺序流程控制

为什么实现一个同步流程还要控制？

下例：

gulp.task('init',['init_a','init_b','init_c'],function(){

    console.log('init end');

});
gulp.task('init_a',function(){

    setTimeout(function(){
       console.log('init_a end');

    },200);

});
gulp.task('init_b',function(){

    setTimeout(function(){
        console.log('init_b end');

    },50);

});

gulp.task('init_c',function(){

    setTimeout(function(){
        console.log('init_c end');

    },100);

});

在控制台输入命令：gulp init
运行结果：

init_b先执行完毕，说明是异步执行的。

其实我这么测试也不对的，真实的情况是，可能init_a/b/c下有很多小任务，它们之间也是异步的。

使用流程控制好了：

gulp.task('init2', sequence('init_a', 'init_b', 'init_c'));

（2）gulp-sourcemaps

处理压缩时，添加map，源文件和压缩后文件之间代码行的一一对应。报错时就可以找到源文件的错误点。

（3）gulp-babel

可以编写es6代码，最终生成es5兼容代码执行了。。

（4）代码压缩 gulp-uglify

压缩JS曾经很麻烦，但现在完全是简单自动化的。

（5） gulp-eslint

遵循代码风格、发现错别字、有助于避免错误。Gulp 可以查看你所有的 JS 文件，并在你每次保存的时候运行 linter。需要把你的 JS 代码放在单独的 .js 文件中才能运行 linter 。

从石器时代进入现在世界了。。。站在了巨人的肩膀上

更多插件，请移步搜索之：
来这里探索