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版本）

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是异步的，不写是同步的

gulp 4

gulp.task(‘watch‘, function () {
    // gulp.watch([‘dist/index.html‘], [‘html‘]);
    gulp.watch("src/index.html", ["copy-html"]); // 第二个参数是数组
    gulp.watch("src/images/**/*", ["images"]);
    gulp.watch("src/js/*.js", ["script"]);
});

var connect = require("gulp-connect");
var { createProxyMiddleware } = require(‘http-proxy-middleware‘);
gulp.task("server", function(){
    connect.server({
        // root: "dist", // 设置根目录
        root: "src", // 设置根目录
        port: "8888",
        livereload: true, // 启动实时刷新功能
        middleware: function (connect, opt) {
            return [
                createProxyMiddleware(‘/fs‘, {
                    target: ‘https://www.lagou.com‘,
                    changeOrigin:true,
                    pathRewrite:{ // 路径重写规则 
                        ‘^/fs‘:‘‘
                    }
                }),
                // proxy(‘/product‘, {
                //     target: ‘http://172.16.1.60:8080‘,
                //     changeOrigin:true
                // }),
                // proxy(‘/bpauth‘, {
                //     target: ‘http://192.168.24.77:8080‘,
                //     changeOrigin:true
                // })
            ]
        }
    })
})

// 注册默认任务
//运行Gulp时，默认的Task
gulp.task(‘default‘, gulp.series([‘server‘, ‘watch‘], function(){
    console.log("任务执行完毕")
}))

// 生产 gulp build
gulp.task(‘build‘, gulp.series([‘html‘,‘js‘,‘lib‘, ‘css‘, ‘images‘]));

gulp 基本配置

原文：https://www.cnblogs.com/lisaShare/p/13182394.html