【工程化】前端工程构建工具gulp篇

gulp ,基于 NodeJS 的项目，自动化构建的工具增强你的工作流程！

一、工作原理

前端构建工具，gulp是基于Nodejs，自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。流，Node将几乎所有IO操作都抽象成了stream的操作，简单来说就是：
(1)在面向对象基础上的一种抽象的处理数据的工具。
(2)通过各种 Transform Stream 来实现文件不断处理输出。

二、gulp安装引入

1.全局安装gulp

安装好node，然后全局安装gulp。

npm i -g gulp

2.项目中重新安装并保存到开发依赖：

npm i gulp -D

3.安装或引用所需的插件

//安装插件 
npm i gulp gulp-ssh gulp-ftp -D
-------------
//引入差价（有些插件经常用 已装在全局，就可以直接引入到项目里）
npm link gulp gulp-ssh gulp-ftp

4.在项目根目录下创建 gulpfile.js 的文件

gulp执行的时候默认去找这个文件。

三、gulpfile.js 格式

1.加载模块插件

//**AMD**   require.js 用require()加载模块 下面例子都用require
var gulp = require('gulp'); 

//**es6中** 用import加载模块
import gulp from 'gulp';

2.编写任务

var gulp = require('gulp');

gulp.task('default', function() {
  // doSomething
  console.log("开启默认gulp项目")
});

3.运行任务

示例：在终端输入 gulp等于输出gulp default; 就是默认读取'default'任务

四、常用API

1. `task( )` 创建定义任务

task(name,function(){}); 语法参数 (名字,执行函数)

//创建定义名为'build'的任务
gulp.task('build', function() {
  console.log("开启build任务")
});

2. `dest( )` 导出文件到哪

正式描述：创建用于将虚拟对象写入文件系统的流

var gulp = require('gulp');

gulp.task('save', function(){ 
  return gulp.src('../js/**/*.js') 
    .pipe(gulp.dest('../output/js/')); //写入到output/js/路径下
}

//pipe方法传入一个function接收上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)

3. `src()` 读取文件

正式描述：src(匹配文件路径);创建一个流,从文件中读取虚拟对象

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

gulp.task('uglify', function(){   //新建一个叫uglify的任务
    return gulp.src('../js/**/*.js')    //js项目下全部的js文件
        .pipe(uglify())                     //对流进行压缩
        .pipe(gulp.dest('../output/js/'));  //写入到output/js/路径下
});

4.`watch( )`监视文件,文件发生变化执行任务

watch(globs, [options], [task]); 监听文件路径，配置选项，执行任务

var gulp = require('gulp');
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任务

五、Glob 匹配文件路径

Glob 是由普通字符和/或通配字符组成的字符串，用于匹配文件路径。可以利用一个或多个 glob 在文件系统中定位文件。

有点类似于正则表达式，但是语法又有点差异。

这种模式，被广泛用于命令行、Shell 等场景，大家熟悉的.gitignore文件也是使用这种模式。各大语言都有对于 Glob 的实现，例如 Go 和 PHP 的Glob函数，Python 中的glob模块。而 NodeJS 的实现是minimatch, 而在 Gulp 源码中，就用了对 minimatch 进行封装的node-glob模块。

Gulp的gulp.watch和gulp.src都有用到 Glob 来匹配对应的路径和文件。

匹配模式详解：

很接近正则但不完全一样

单匹配模式：

code	匹配	说明
`.`	`a.js` , `b.css`	匹配所有带后缀的文件
`//*.js`	`a/b/c.js`，`x/y/z.js`	匹配固定层级目录
`**`	`abc`，`a/b`，`a/b.js`	匹配所有的目录和文件
`js/*/.js`	`js/a.js`，`js/a/b.js`	匹配a目录下的`.js`文件
`a??`	`a.b`，`abc`	占位符与字符搭配使用
`[abc].js`	`a.js`，`b.js`，`c.js`	整个`[]`只匹配一个字符
`[^abc].js` `[!abc].js`	`x.js`，`y.js`	除了`a.js b.js c.js`外的全部js

多匹配模式：

1.类正则

2.数组[ ]

code	匹配说明
[.js,'!b.js']	匹配所有js文件，但排除掉以b开头的js文件
['!b.js',.js]	不排除任何文件，因为排除模式不能出现在数组的第一个元素中

3.展开模式{ }
正则里面我们用{}装载量词，而这里是表示展开模式。

code	匹配说明
a{b, c}d	展开为：abc，acd
a{b,}c	展开为：abc，ac
a{0..3}c	展开为：a0c，a1c，a2c
a{b, c{d, e}f}g	展开为：abg，acdfg，acefg
a{b, c}d{e, f}g	展开为：abdeg，acdeg，abdeg，abdfg

六、常用插件

进入官网搜索插件名字后都有详细的配置说明和示例

del //删除文件

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

gulp-rename //文件重命名

var gulp = require('gulp');
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'));

fs //nodejs 的fs模块

因为是node自带的模块不需要另外安装。
列举两个是冰山一角，可以点链接去官网看

var fs =require("fs");

// 写入文件    
fs.writeFile(file, data[, options], callback)
//读取文件
fs.readFile(path[, options], callback)

//-----------任务--------------

gulp-sequence //按顺序执行一系列任务

var gulpSequence= require('gulp-sequence');

//并行执行任务a和任务b, 在a和b都结束后才执行c
gulp.task('sequence-1', gulpSequence(['a', 'b'], 'c'))

//执行单个任务
gulp.task('sequence-1', gulpSequence('a')

readable-stream //可读流

gulp-uglify //文件压缩

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;
 
gulp.task('compress', function () {
  return pipeline(
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
  );
});

gulp-imagemin //压缩图片

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
 
exports.default = () => (
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
);

gulp-less // less编译

gulp-cssmin // css压缩

gulp-autoprefixer //前缀补充

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

gulp.task('cssmin', function(){
    return gulp.src('../less/'+ lessFile +'.less')
        .pipe(less())
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cssmin())
        .pipe(gulp.dest('../css/'));
})

gulp-livereload // 热更新

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
 
gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp-rename //重命名例如a.txt 改 b.js

var rename = require("gulp-rename");
 
gulp.src("./src/main/text/a.txt")
  .pipe(rename("main/text/ciao/b.js"))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md

gulp-live-server //起服务

gulp-sourcemaps //显示源码

mark一下仅供参考欢迎更正补充 Thanks

参考资料：
官网: https://www.gulpjs.com.cn/
官网插件使用: https://www.npmjs.com/
博客类：
gulp及其插件: https://www.jianshu.com/p/a9e...
常用gulp插件: https://www.cnblogs.com/nanxi...
插件编写入门: https://www.cnblogs.com/chyin...
gulp的基础和原理：http://huang-jerryc.com/2017/...