gulp 基本配置

gulp

使用中，还会继续完善

异步多任务

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

src(filePath/pathArr)
指向指定路径的所有文件，返回文件流对象；用于读取文件
dest(dirPath/pathArr)
指向指定的所有文件夹

1. cnpm install gulp@3.9.1 --save-dev 如果是gulp低版本，node最新版本不支持（我们现在都直接使用gulp4版本，笔记是gulp3，下面有gulp4的配置代码）

2. 创建一个gulpfile.js的文件，专门让gulp去编写任务的。

   gulpfile.js中，使用commIS规范

   1. require() 将这个模块引入
   2. 使用这个模块上的函数

3. 在gulpfile.js中编写任务，需要在控制台通过 gulp任务名，运行你编写好的任务
   第一个参数：任务的名字 自定义
   第二个参数：回调函数，任务执行的功能

   gulp.src() 找到源文件路径
   gulp.dest() 找到目的文件路径 【注】如果设置的这个目的文件路径不存在，会自动创建
   pipe() 理解程序运行管道

   1. 整理 .html文件

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

   // 注册压缩html的任务
   gulp.task('html', function(){
       return gulp.src('index.html')
       .pipe(htmlmin({collapseWhitespace: true}))
   })
   

   2. 静态文件 拷贝图片

   gulp.task("images", function(){
       // return gulp.src("img/*.jpg")
       // return gulp.src("img/*.{jpg,png}")
       return gulp.src("img/**/*")
       .pipe(gulp.dest("dist/images"))
   })
   

   3. 拷贝多个文件到一个目录中

   gulp.task("data", function(){
       return gulp.src(["json/*.json","xml/*.xml","!xml/4.xml"]) // 将 !xml/04.xml 剔除掉
       .pipe(gulp.dest("dist/data"))
   })
   

   4. 一次性执行多个任务的操作

   gulp.task("build", ["copy-html", "images", "data"], function(){
       console.log("任务执行完毕")
   })
   

   5. 监听，如果监听到文件有改变，会自动去执行对应的任务，更新数据
      cmd cnpm gulp watch

   gulp.watch("index.html", ["copy-html"]); // 第二个参数是数组
   gulp.watch("img/**/*", ["images"]);
   gulp.watch(["json/*.json","xml/*.xml","!xml/4.xml"], ["data"]);
   

4. 给gulp添加插件

   使用第三方插件步骤：commonJS规范

   <1>先去下载插件到本地
   cnpm install 插件名字 --save-dev
   cnpm i 插件名字 -D
   <2>通过require()引入文件
   <3>查阅插件的用法

处理css插件

```
// gulp-sass 
const sass = require("gulp-sass");
// 压缩css gulp-minify-css
const minifyCSS = require("gulp-minify-css"); 
// 重命名插件 gulp-rename
const rename = require("gulp-rename"); 
// cssClean({compatibility: 'ie8'}) gulp-clean-css
gulp.task("sass", function(){
    return gulp.src("stylesheet/index.scss")
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(rename("index.min.css"))
    .pipe(gulp.dest("dist/css"))
})

gulp.task("css", ["sass"] function(){ // 异步要做处理
})

```

处理js文件的插件

```
// gulp-concat 合并文件（将文件合并）
const concat = require("gulp-concat"); 
// gulp-uglify 压缩.js
const uglify = require("gulp-uglify"); 
gulp.task("script", function(){
    return gulp.src("js/*.js")
    .pipe(concat("index.js"))
    .pipe(uglify())
    .pipe(rename("index.min.js")) // {suffix: '.min'}
    .pipe(gulp.dest("dist/js"))
    // .pipe(connect.reload()) // 添加livereload后每个任务都需要监听一下
})

```
```
// gulp-connect 来启动一个服务器
const connect = require("gulp-connect");
gulp.task("server", function(){
    connect.server({
        root: "dist", // 设置根目录
        port: "8888",
        livereload: true, // 启动实时刷新功能
    })
})
```

同时启动监听和服务 default我们可以直接在控制台通过 gulp命令启动
gulp.task("default", ["watch", "server"])

重点：jQuery编写的代码大家不要合并和压缩

注册任务写return是异步的，不写是同步的

以上是gulp3基本笔记，下面是gulp4 gulpfile.js代码，可实现实时刷新及代理

const { series, parallel, task, src, dest, watch } = require('gulp'),
    uglify = require('gulp-uglify'), // 压缩js
    connect = require("gulp-connect"),
    { createProxyMiddleware } = require('http-proxy-middleware'),
    babel = require('gulp-babel'),
    autoprefix = require('gulp-autoprefixer'), // CSS前缀
    htmlmin = require('gulp-htmlmin'), // HTML压缩
    del = require('del'), // 清空指定文件夹
    open = require('gulp-open'),
    ip = require('ip'), // 本地IP
    // host = ip.address(),
    host = 'localhost',
    port = '8888',

    app = {  // 定义目录
        srcPath: 'src/',
        buildPath: 'build/',
        distPath: 'dist/'
    }

task('lib', function () {
    return src(app.srcPath + 'lib/**/*')
        .pipe(dest(app.distPath + 'lib'))
        .pipe(connect.reload())
})

task('js', function () {
    return src(app.srcPath + 'js/*.js')
        .pipe(babel({
            presets: ['babel-preset-env']
        }))
        .pipe(uglify())
        .pipe(dest(app.distPath + 'js'))
        .pipe(connect.reload())
})
task('html', function () {
    return src(app.srcPath + '**/*.html')  /*src下所有目录下的所有.html文件*/
        .pipe(dest(app.distPath))//gulp.dest 要把文件放到指定的目标位置
        .pipe(connect.reload()) // 当内容发生改变时，重新加载。
})

const htmlMin = function () {  // html压缩
    return new Promise(resolve => {
        var options = {
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS
        };
        src(app.srcPath + '**/*.html')
            .pipe(htmlmin(options))
            .pipe(dest(app.distPath))
        resolve();
    });
};

task('css', function () {
    return src(app.srcPath + 'css/*.css')
        .pipe(autoprefix('last 3 versions'))  // 前缀
        .pipe(dest(app.distPath + 'css'))
        .pipe(connect.reload())
})

task("images", function () {
    return src(app.srcPath + 'images/**/*')
        .pipe(dest(app.distPath + 'images'))
        .pipe(connect.reload())
})

task('watch', function () {
    watch(app.srcPath + "**.html", series("html"));
    watch(app.srcPath + "images/**/*", series("images"));
    watch(app.srcPath + "js/*.js", series("js"));
    watch(app.srcPath + "css/*.css", series("css"));
});

task("server", function () {
    connect.server({
        root: "dist", // 设置根目录
        // root: "src", // 设置根目录
        host: host,
        port: port,
        livereload: true, // 启动实时刷新功能
        middleware: function (connect, opt) {
            return [
                createProxyMiddleware('/fs', {
                    target: 'https://www.lagou.com',
                    changeOrigin: true,
                    pathRewrite: { // 路径重写规则 
                        '^/fs': ''
                    }
                })
            ]
        }
    })
})
const openInBrowser = function () {
    return new Promise(resolve => {
        let options = {
            uri: 'http://' + host + ':' + port,
            // app: 'chrome' // 指定浏览器打开
        };
        src(__filename)
            .pipe(open(options));
        resolve();
    })
};

const cleanBuild = function () {
    // 清除build下的文件
    return del([
        // 'dist/report.csv',
        // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
        app.distPath + '**/*',
        // 我们不希望删掉这个文件，所以我们取反这个匹配模式
        // '!dist/mobile/deploy.json'
    ]);
};


// npm install --save-dev minimist gulp-util

const minimist = require('minimist'); // 参数解析引擎
const gutil = require('gulp-util');

// 默认development环境
var knowOptions = {
  string: 'env',
  default: {
    env: process.env.NODE_ENV || 'development'
  }
};

var options = minimist(process.argv.slice(2), knowOptions);
// console.log(process.env)
// console.log(process.env.NODE_ENV)
// console.log(process.argv);
// console.log(process.argv.slice(2)); // []  [ 'build', '--env', 'production' ]
// console.log(options); // { _: [], env: 'development' } { _: [ 'build' ], env: 'production' }
// 生成filename文件，存入string内容
function string_src(filename, string) {
  var src = require('stream').Readable({ objectMode: true })
  src._read = function () {
    this.push(new gutil.File({ cwd: "", base: "", path: filename, contents: new Buffer(string) }))
    this.push(null)
  }
  return src
}

task('constants', function() {
  // 读入config.json文件
  var myConfig = require('./config.json');
  // 取出对应的配置信息
  var envConfig = myConfig[options.env];
//   console.log(JSON.stringify(envConfig)); // {"apiUrl":"http://applicationName.com/api/projectName/"}
  var conConfig = 'var apiConfig = ' + JSON.stringify(envConfig);
  // 生成config.js文件
  return string_src("config.js", conConfig)
      .pipe(dest(app.distPath))
});

// 启动服务 命令：gulp
// task('default', series(parallel(connectServe, watchCode, openInBrowser)));
task('dev', series(['html', 'js', 'lib', 'css', 'images']));
task('default', series('constants', parallel('server', 'watch', 'dev', openInBrowser)));

// 打包压缩 命令：gulp build --env production
task('dist', series(['js', 'lib', 'css', 'images']));
// task('build', series(cleanBuild, parallel(htmlMin, imgMin, cssMin, jsMin)));
task('build', series(cleanBuild, parallel('constants', 'dist', htmlMin)));

config.json

{
  "development": {
    "apiUrl": "/fs"
  },
  "production": {
    "apiUrl": "http://applicationName.com/api/projectName/"
  }
}

.babelrc

{  
    "presets": [  
        "es2015" 
    ],  
    "plugins": []  
}

package.json

"devDependencies": {
    "@babel/core": "^7.10.3", 
    "@babel/preset-env": "^7.10.3",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^7.0.1",
    "gulp-connect": "^5.7.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-open": "^3.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "http-proxy-middleware": "^1.0.4",
    "ip": "^1.1.5",
    "minimist": "^1.2.5"
}