Gulp

前端工程化：开发项目时，会有两套代码，一套是原始的，我们编译时的代码； 一套是压缩打包后的代码。当我们编译好原始代码之后，需要做一系列的脏活，才可以将代码变成打包好的代码去上线，需要一些工具来快速方便地完成这些脏活。webpack，NPM script都是这样的一些工具。

Gulp

地址： http://gulpjs.com/

• 它是一款nodejs应用。
• 它是打造前端工作流的利器，打包、压缩、合并、git、远程操作...，
• 简单易用
• 无快不破
• 高质量的插件
• ....

gulp 安装及常见问题

1. 安装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

2. 安装各种插件

    npm install --save gulp            //本地使用gulp
    npm install --save gulp-imagemin   //压缩图片
    npm install --save gulp-minify-css //压缩css
    npm install --save gulp-ruby-sass  //sass
    npm install --save gulp-jshint     //js代码检测
    npm install --save gulp-uglify     //js压缩
    npm install --save gulp-concat     //文件合并
    npm install --save gulp-rename     //文件重命名
    npm install --save png-sprite      //png合并
    npm install --save gulp-htmlmin    //压缩html
    npm install --save gulp-clean      //清空文件夹
    npm install --save browser-sync    //文件修改浏览器自动刷新
    npm install --save gulp-shell      //执行shell命令
    npm install --save gulp-ssh        //操作远程机器
    npm install --save run-sequence    //task顺序执行

或者根据package.json 自动安装。把package.json拷贝到自己的工程目录下，进入目录，执行:npm install

gulp 使用案例

所有代码在：https://coding.net/u/jirengu/p/gulp/git

gulp就相当于一个流水线，一开始什么都没有，你要在上面添加很多工具，去处理你的代码，最终得到一个结果
工具在npm上找，如下面的官网例子（pug,less,minifyCSS）

const { src, dest, parallel } = require('gulp');
const pug = require('gulp-pug');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');

//处理一个html任务
function html() {
  return src('client/templates/*.pug') //找到要处理的文件
    .pipe(pug())    //pipe 管道  传输到pug来处理这个文件 pug就是工具 处理完是数据流
    .pipe(dest('build/html'))   //pug处理完，通过管子来到这一级，将数据流处理成html文件
}
//以上就是一个gulp的处理流程，src 物料的倒入，pug 处理的流程， dest 输出成品

//处理一个css任务
function css() {
  return src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(dest('build/css'))
}

function js() {
  return src('client/javascript/*.js', { sourcemaps: true })
    .pipe(concat('app.min.js'))
    .pipe(dest('build/js', { sourcemaps: true }))
}

exports.js = js;
exports.css = css;
exports.html = html;
exports.default = parallel(html, css, js);

Gulp API

src()

例：

const { src, dest } = require('gulp');

function copy() {
  return src('input/*.js')
    .pipe(dest('output/'));
}

exports.copy = copy;

语法：

src(globs, [options])

主要是globs的语法，是一种类似正则的匹配文字的语法
src('input//.js', { sourcemaps: true }) 匹配input文件夹里的所有js文件。//不管中间嵌套多少个文件夹
['scripts//.js', '!scripts/vendor/**'] 匹配input文件夹里的所有js文件，除了vendor以下的 ！除了

dest()

例：

const { src, dest } = require('gulp');

function copy() {
  return src('input/*.js')
    .pipe(dest('output/'));
}

exports.copy = copy;

语法

dest(directory, [options])

task()//目前已不推荐使用

task里面不可以有空格，因为task要在命令行里执行，会误判
例

const { task } = require('gulp');

task('build', function(cb) {
  // body omitted
  cb();
});

语法：

task([taskName], taskFunction)

watch()

监听文件变化
可以用它来实现：当我修改完某个文件时，将其自动发送到服务器等操作
例：

const { watch } = require('gulp');
///当监听到input以下的js文件（除了something）发生变化时，执行cb
watch(['input/*.js', '!input/something.js'], function(cb) {
  // body omitted
  cb();
});

语法:

watch(globs, [options], [task])

//2019-8-27