Gulp.js

1. 了解gulp

gulp是 前端项目构建工具，也是基于Node.js 的自动 任务运行器；
能够自动完成 JavaScript/coffee/css/less/sass/html/image 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务；
gulp更高效（异步多任务）、更易于使用、插件高质量。

//创建一个简单的应用
|- dist
|- src
	|- js
	|- css
	|- less 
|- .babelrc ----- 关于babel的配置
|- .gitignore ----- 忽略上传的文件配置
|- index.html
|- gulpfile.js ----- gulp配置文件
|- package.json
	{
		"name": "gulp_demo",
		"version": "1.0.0"
	}

2. gulp.js 的特点：

1. 任务化 ----- gulp.task()
2. 基于流 I/O

gulp 库中存在一个内存，将本地文件读到内存中（gulp.src()），称为输入流；
在内存中修改操作完成后，输出到本地(gulp.dest())，称为输出流。

3. 基于任务是异步，当然也可通过去掉每个任务的 return 来变为同步任务。
   
   

3. gulp常用相关

• 使用gulp插件
  • 相关插件

    • gulp-concat : 合并文件（js / css）;

    • gulp-uglify : 压缩js文件；

    • gulp-rename : 文件重命名；

    • gulp-less : 用于编译less；

    • gulp-clean-css : 压缩css文件；

    • gulp-livereload : 实现自动编译刷新（实现半自动项目构建）；

    • gulp-connect : 实现热加载（实时加载）；

    • open : 可以自动打开指定的链接；

    • gulp-util : 进行测试，打印错误；

      .on(‘error’, function(err) {
      gutil.log(gutil.colors.red(’[Error]’), err.toString());
      })

    • gulp-babel : 将es6/7 高级语法进行转换

      // babel 将es6语法进行转换
      .pipe(babel())
      拓展：babel-preset-env、@babel/core、babel-preset-es2015等

    • gulp-htmlmin : 压缩html任务

  • 重要API
    • gulp.src(filePath / fileArr);
      • 指向指定路径的所有文件，返回文件流对象
      • 用于读取文件
    • gulp.dest(dirPath / pathArr);
      • 指向指定所有文件夹
      • 用于向文件夹输出文件
    • gulp.task(name, [deps], fn);    // 第二参数可以解决任务间依赖关系
      • 定义一个任务
    • gulp.watch(filesarr, taskarr);
      • 监听文件变化
  • 扩展插件 gulp-load-plugins
    • 引用：var $ = require(‘gulp-load-plugins’)();
    • 优点：其他的插件将不再需要引入

4. api使用代码详解

// gulp 相关配置
// 本次使用了[e-mail] 的版本，更高版本有所改动
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 使用gulp-util 打印错误，进行排查
var gutil = require('gulp-util');
// 引入babel
var babel = require('gulp-babel')

// less相关
var less = require('gulp-less');
var cleanCss = require('gulp-clean-css');

// 压缩html文件
var htmlMin = require('gulp-htmlmin');

// 半自动进行项目构建
var livereload = require('gulp-livereload');

// 全自动项目构建
var connect = require('gulp-connect');
var open = require('open');

// 注册一个任务
// gulp.task("任务名", function() {
//     // 配置任务的操作

// });

// 注册合并js任务
gulp.task("js", function() {
    // return gulp.src('src/js/**/*.js');   表示读取js下所有的 .js 文件
    return gulp.src('src/js/*.js')   // 找到目标文件，将其读到gulp的内存中 , 所有的文件都在管道中操作
        .pipe(concat('build.js'))    //合并文件
        .pipe(gulp.dest('dist/js/'))  // 临时输出文件到本地
        // babel 将es6语法进行转换
        .pipe(babel())
        .pipe(uglify())              // 压缩
        // 打印错误日志，排查错误 
        .on('error', function(err) {
            gutil.log(gutil.colors.red('[Error]'), err.toString());
        })
        .pipe(rename('build.min.js'))   // 重命名
        // .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/js/'))
        .pipe(livereload())  //实时刷新
        .pipe(connect.reload())   //热加载
});

// 编译转换less为css的任务
gulp.task("less", function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css/'))
        .pipe(livereload())  //实时刷新
        .pipe(connect.reload())   //热加载
});

// 合并并压缩css文件
// 任务通过return返回，默认情况下是异步的，可以同去电return将其变为同步的，
// 第二个参数可有可无，可以解决任务间的依赖关系，如下：表示先执行less的任务，在执行css任务
gulp.task('css', ['less'], function() {
    return gulp.src('src/css/*.css')
        .pipe(concat('build.css'))
        .pipe(rename({suffix: '.min'}))
        // 压缩合并后的css文件
        .pipe(cleanCss({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css'))
        .pipe(livereload())  //实时刷新
        .pipe(connect.reload())   //热加载
});

// html
gulp.task('html', function() {
    return gulp.src('index.html')
        .pipe(htmlMin({collapseWhitespace: true}))   // 表面压缩掉空格
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())  //实时刷新
        .pipe(connect.reload())   //热加载
});

// 注册监视任务 （半自动）
gulp.task('watch', ['default'], function() {
    // 开启监视
    livereload.listen();
    // 确定监听的目标以及绑定的相应的任务
    gulp.watch('./src/js/*.js', ['js']);
    gulp.watch(['./src/css/*.css', './src/less/*.less'], ['css']);
});

// 注册监视任务（全自动）
gulp.task('server', ['default'], function() {
    // 配置服务器选项
    connect.server({
        root: 'dist/',   // 配置根入口文件 即index.html
        livereload: true,
        port: 5000
    });

    // open() 打开指定的链接
    open("http://localhost:5000/");

    // 监听目标及绑定的相应任务
    gulp.watch(['./src/js/*.js', './src/css/*.css', './src/less/*.less'], ['js', 'css'])
});

// 注册默认任务
gulp.task('default', ['js', 'less', 'css', 'html']);

启动对应任务命令： gulp 任务名称
路线指导：js -> -> less -> css -> html -> 半自动实现 -> 全自动实现