Gulp

gulp

https://github.com/gulpjs

可以自动化执行任务的工具，主要用于生产环境和开发环境的文件处理

Gulp是一个新的基于流的管道式构建系统，需要很少的配置并且更快

主要作用:

    1、多个js或css文件合并、压缩

    2、Sass或Less的编译

    3、图像的压缩

    3、实时刷新页面的本地服务器

gulp对按需加载不好做到，如A和B页面都依赖base.js，但又各依赖a.js和b.js，这种情况gulp打包是将三个都包括了，所以css和html部分gulp来处理，js的webpack处理

安装、使用

$ npm install -g gulp     // 全局安装Gulp

$ npm init    // 创建package.json 项目描述文件

$ npm install --save-dev gulp    // 作为项目的开发依赖(只在开发时用，不会发布到线上)

$ touch gulpfile.js

    var gulp = require('gulp');
    gulp.task('default', function(){

    })

$ gulp     // 运行gulp

gulp 方法

1、gulp.src(): 获取到想要处理的文件流，可以是一个字符串或者数组，返回一个stream

    1)、*.{png,jpg,gif,ico}      // 匹配文件

    2)、**/*.html        // 目录用**、文件名用*

    gulp.task('count', function(){
        gulp.src(['aa.html', 'bb.html'])    // 或 gulp.src('src/*.html');
            .pipe(gulp.uglify())
    })

2、gulp.pipe(): 将获取到的文件流通过pipe()导入到gulp的插件中进行处理

3、gulp.dest(): 用来写文件的，插件处理完，通过dest()处理完成后把流中的内容写到指定的文件中

    var gulp = require('gulp');
    gulp.src('js/main.js')                 // 获取文件的流的api
        .pipe(gulp.uglify())            // 文件进行压缩
        .pipe(gulp.dest('dist/[name].min.js'));     // 写文件的api


4、gulp.task('任务名' [依赖任务], callback): 定义任务，依赖任务会在当前任务执行前完成

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

    # gulp test     // 执行任务


5、gulp.watch('要监视文件的匹配模式', [要执行的task定义的任务], callback): 监视文件的变化，变化后来执行定义的任务

gulp 执行命令

-v 或 --version 会显示全局和项目本地所安装的 gulp 版本号

--gulpfile 手动指定一个 gulpfile 的路径，这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录

--cwd dirpath 手动指定 CWD。定义 gulpfile 查找的位置，此外，所有的相应的依赖（require）会从这里开始计算相对路径

-T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树

--tasks-simple 会以纯文本的方式显示所载入的 gulpfile 中的 task 列表

--color 强制 gulp 和 gulp 插件显示颜色，即便没有颜色支持

--no-color 强制不显示颜色，即便检测到有颜色支持

--silent 禁止所有的 gulp 日志

Gulp 扩散操作

1、复制单个文件task

    gulp.task('copy-html',function(){
        return gulp.src('app/index.html').pipe(gulp.dest('dist'));
    });


2、复制多个文件

    gulp.task('copy-images',function(){
        return gulp.src('app/imgs/**/*.{jpg,png}').pipe(gulp.dest('dist'));
    });

    gulp.task('copy-other',function(){
        return gulp.src(['app/css/*.css','app/js/*.js'],{base:'app'}).pipe(gulp.dest('dist'));
    });

gulp 插件

https://gulpjs.com/plugins/

$ gulp
$ gulp-babel babel-core babel-preset-env        // ES6转ES5
$ babel-plugin-transform-runtime        // ES6转ES5运行时转换
$ gulp-uglify            // 压缩js
$ gulp-concat            // 合并js
$ gulp-jshint            // js语法检测
$ gulp-less              // less编译
$ gulp-ruby-sass        // sass编译
$ gulp-minify-css        // css压缩
$ gulp-css-base64        // 生成64位图标
$ gulp-htmlmin           // html压缩
$ gulp-file-include        // includer嵌入到另一个html文件
$ gulp.spritesmith       // 雪碧图
$ gulp-imagemin          // 压缩图片
$ imagemin-pngquant      // 图片的深度压缩
$ gulp-cache             // 只压缩修改的图片
$ gulp-rev-append        // 加版本号，给页面文件引用的js和css资源
$ gulp-autoprefixer     // 自动补齐前缀，根据设置浏览器版本自动处理浏览器前缀 CSS3的前缀
$ gulp-react             // react区分jsx文件进行转换
$ gulp-webpack           // webpack
$ gulp-amd-optimizer     // requirejs 压缩
$ vinyl-buffer           // 流缓存
$ merge-stream           // 合并流
$ gulp-watch             // 侦听变化自动执行task
$ gulp-livereload        // 当监听文件发生变化时，浏览器自动刷新页面
$ gulp-header            // 注释自定义插件
$ gulp-rimraf            // 清除文件
$ gulp-clean             // 删除文件或目录
$ gulp-plumber           // 错误提示
$ gulp-notify            // 消息提示
$ gulp-rename            // 重命
$ gulp-connect           // gulp的服务器
$ gulp-browserify          // 
$ gulp-open                // 打开浏览器
$ gulp-md5-plus            // 生成md5码

一、gulpfile.js中引用插件   

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


二、gulp-load-plugins 模块化管理插件

    1、一般情况下，gulpfile.js中的模块需要一个个加载。

        var gulp = require('gulp')
               jshint = require('gulp-jshint'),
            uglify = require('gulp-uglify'),
            concat = require('gulp-concat');

        gulp.task('js', function () {
               return gulp.src('js/*.js')
                  .pipe(uglify())
                  .pipe(concat('app.js'))
                  .pipe(gulp.dest('build'));
        });


    2、gulp-load-plugins 会加载 package.json中存在下面的插件依赖：

        "devDependencies": {
            "gulp": "^3.9.0",
            "gulp-uglify": "^2.6.0",
            "gulp-concat": "^2.2.0"
        }

        var gulp = require('gulp');
        var $ = require('gulp-load-plugins')();            // 加载gulp-load-plugins插件，并立刻运行

        使用：$.uglify  可以省去单个引入
        gulp.task('add', function(){
            gulp.src(['js/main.js'])
                .pipe($.concat)
                .pipe($.uglify)            // $.uglify就可以调用了
                .pipe(gulp.dest('dist/[name].min.js'));    // 如果不改变文件名就直接写成 dist/js/
        })

gulp + webpack构建多页面

├── .DS_Store
├── src                // 生产目录
├── dist            // 发布目录
├── gulpfile.js
├── node_modules
└── package.json

| 参考资料
| http://www.gulpjs.com.cn/ gulp中文网
| http://www.ydcss.com/archives/category/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7
| http://www.gulpjs.com.cn/docs/recipes/ gulp 技巧集
| http://www.gulpjs.com.cn/docs/api/ gulp api
| http://www.techug.com/gulp gulp使用指南
| http://www.w3ctech.com/topic/134 gulp开发教程
| http://www.qianduancun.com/nodejs/33.html gulp-load-plugins[模块化管理插件]
| http://segmentfault.com/a/1190000003098076#articleHeader0 利用 gulp 处理前端工作流程
| http://www.cnblogs.com/2050/p/4198792.html 前端构建工具gulpjs的使用介绍及技巧
| https://www.cnblogs.com/weixing/p/5474324.html
|
| 多页面
| https://www.cnblogs.com/maskmtj/archive/2016/07/21/5597307.html
| https://github.com/fwon/gulp-webpack-demo
|
| 文件流
| http://segmentfault.com/a/1190000000519006 nodejs中流(stream)的理解
| http://www.it165.net/pro/html/201406/15924.html Node.js Stream（流）的学习笔记
| http://segmentfault.com/a/1190000000357044 Node 中的流（Stream）
|
| Promise
| http://segmentfault.com/a/1190000002591145 深入理解Promise实现细节
| http://www.tuicool.com/articles/fe6Jbyz Promise实现原理
| http://segmentfault.com/a/1190000003028634 异步编程 promise模式 的简单实现
| http://sentsin.com/web/861.html