gulp

文章内容输出来源：拉勾教育大前度高薪训练营

gulp

gulp的基本使用

  • 官方定义：the streaming build system（基于流的构建系统）
  • 特性：高效、易用

  • 使用:

    • 初始化项目：yarn init -y
    • 安装gulp：yarn add gulp --dev
    • 在项目根目录下创建gulpfile.js作为gulp的入口文件(定义方式为导出函数成员的方式)

    • 使用案例：

      // gulp的入口文件
exports.foo = () => {
      
    console.log('foo task working~');
      
}

      • 运行结果：

      • 解决方式：

        // gulp的入口文件
exports.foo = done => {
        
    console.log('foo task working~');
        
    done() // 标识任务完成
        
}

    • 默认任务default：执行方式为yarn gulp

    exports.default = done => {
    console.log('default task working~');
    
    done();
    
}
    • gulp4.0以前：(4.0以后也可以用， 但不推荐使用)
    const gulp = require('gulp');
gulp.task('bar', done => {
    
    console.log('bar working~');
    
    done();
    
})

gulp 创建组合任务

  • 串行任务series的使用方法：
// gulp的入口文件
const { series } = require('gulp');

const task1 = done => {
    setTimeout(() => {
        console.log('task1 working~');
        done() // 标识任务完成
    }, 1000);
}

const task2 = done => {
    setTimeout(() => {
        console.log('task2 working~');
        done();
    }, 1000);
}

const task3 = done => {
    setTimeout(() => {
        console.log('task3 working~');
        done();
    }, 1000);
}

exports.foo = series(task1, task2, task3);
  • 并行任务parallel的使用方法：
// gulp的入口文件
const { parallel } = require('gulp');

const task1 = done => {
    setTimeout(() => {
        console.log('task1 working~');
        done() // 标识任务完成
    }, 1000);
}

const task2 = done => {
    setTimeout(() => {
        console.log('task2 working~');
        done();
    }, 1000);
}

const task3 = done => {
    setTimeout(() => {
        console.log('task3 working~');
        done();
    }, 1000);
}

exports.bar = parallel(task1, task2, task3);

gulp的异步任务

const fs = require('fs');

exports.callback = done => {
    console.log('callback task~');
    done();
}

exports.callback_error = done => {
    console.log("callback task~");
    done(new Error('task failed!'));
}

exports.promise = () => {
    console.log('promise task~');
    return Promise.resolve;
}

exports.promise_error = () => {
    console.log("promise task~");
    return Promise.reject(new Error("task failed~"))
}

const timeout = time => {
    return new Promise(resolve => {
        setTimeout(resolve, time);
    })
}

exports.async = async () => {
    await timeout(1000);
    console.log("async task~");
}

exports.stream = () => {
    const readStream = fs.createReadStream('package.json');
    const writeStream = fs.createWriteStream('temp.txt');
    readStream.pipe(writeStream);
    return readStream;
}

exports.stream = done => {
    const readStream = fs.createReadStream('package.json');
    const writeStream = fs.createWriteStream('temp.txt');
    readStream.pipe(writeStream);
    readStream.on('end', () => {
        done();
    })
}

gulp构建过程核心工作原理

const fs = require('fs');
const { Transform } = require('stream');

exports.default = () => {
    // 文件读取流
    const read = fs.createReadStream('public.css');
    // 文件写入流
    const write = fs.createWriteStream("public.min.css");
    // 文件转换流
    const transform = new Transform({
        transform: (chunk, encoding, callback) => {
            // 核心转换过程实现
            // chunk=> 读取流中读取到的内容（Buffer）
            const input = chunk.toString();
            const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, "");
            callback(null, output);
        }
    })
    // 把读取出来的文件流导入写入文件流
    read
        .pipe(transform) // 转换
        .pipe(write); // 写入
    return read;
}

gulp文件操作API

  • css压缩插件安装：yarn add gulp-clean-css --dev
  • 重命名插件安装：yarn add gulp-rename --dev
  • src()方法：读取文件，参数为制定目录下的css文件，也可用*.css获取文件夹下所有的css
  • dest方法：写入到指定的文件夹，参数为要写入到的文件夹名称
const { src, dest } = require('gulp');
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');

exports.default = () => {
    return src('src/*.css')
        .pipe(cleanCss())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(dest('dist'))
}

gulp案例-样式编译

  1. 文件拷贝：base为yarn gulp style编译后放入的dist文件夹的基准路径（"dist/assets/styles"）

    const { src, dest } = require('gulp');
const style = () => {
    
    return src('src/assets/styles/*.scss', { base: 'src' })
    
        .pipe(dest('dist'))
    
}
    
module.exports = {
    
    style
    
}

  2. 将scss文件转换为css ：yarn add gulp-sass --dev

    • 编译时会自动忽略"_"开头的css文件
    • outputStyle可设置css的展示形式
    const { src, dest } = require('gulp');
const sass = require('gulp-sass');
    
const style = () => {
    
    return src('src/assets/styles/*.scss', { base: 'src' })
    
        .pipe(sass())
    
        .pipe(dest('dist'))
    
}
    
module.exports = {
    
    style
    
}

gulp案例-脚本编译

  1. 安装babel: yarn add gulp-babel --dev
  2. 安装@babel/core: yarn add @babel/core --dev
  3. 安装@babel/preset-env: yarn add @babel/preset-env --dev
  4. 如果--dev使用报错，可以将--dev 替换为--also=dev
  5. 报错：gyp: No Xcode or CLT version detected!

gulp案例-页面模板编译

  • 模版引擎转换插件安装：yarn add gulp-swig --dev
const { src, dest } = require("gulp");
const sass = require("gulp-sass");
const babel = require("gulp-babel");
const swig = require("gulp-swig");

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};
const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(swig({ data }))
    .pipe(dest("dist"));
};

module.exports = {
  style,
  script,
  page,
};
  • 创建组合任务
const { src, dest, parallel } = require("gulp");
const sass = require("gulp-sass");
const babel = require("gulp-babel");
const swig = require("gulp-swig");

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};
const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(swig({ data }))
    .pipe(dest("dist"));
};

// 组合任务
const compile = parallel(style, script, page);

module.exports = {
  compile,
};

gulp案例-图片何字体文件转换

安装图片压缩插件：yarn add gulp-imagemin --dev

const { src, dest, parallel } = require("gulp");
const sass = require("gulp-sass");
const babel = require("gulp-babel");
const swig = require("gulp-swig");
const imagemin = require("gulp-imagemin");

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};
const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(swig({ data }))
    .pipe(dest("dist"));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

// 组合任务
const compile = parallel(style, script, page, image, font);

module.exports = {
  compile,
};

gulp案例-其他文件级文件清除

  • 安装清除文件的插件：yarn add del --dev
const { src, dest, parallel, series } = require("gulp");

const del = require("del");

const sass = require("gulp-sass");
const babel = require("gulp-babel");
const swig = require("gulp-swig");
const imagemin = require("gulp-imagemin");

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(swig({ data }))
    .pipe(dest("dist"));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

// 组合任务
const compile = parallel(style, script, page, image, font);

const build = series(clean, parallel(compile, extra));

module.exports = {
  compile,
  build,
};

gulp案例-自动加载插件

  • 安装： yarn add gulp-load-plugins --dev
const { src, dest, parallel, series } = require("gulp");

const del = require("del");

const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const plugins.sass = require("gulp-sass");
// const plugins.babel = require("gulp-babel");
// const plugins.swig = require("gulp-swig");
// const plugins.imagemin = require("gulp-imagemin");

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("dist"));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

// 组合任务
const compile = parallel(style, script, page, image, font);

const build = series(clean, parallel(compile, extra));

module.exports = {
  compile,
  build,
};

gulp案例-开发服务器（热更新开发服务器）

  • 开发服务器插件安装：yarn add browser-sync --dev
const { src, dest, parallel, series } = require("gulp");

const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const plugins.sass = require("gulp-sass");
// const plugins.babel = require("gulp-babel");
// const plugins.swig = require("gulp-swig");
// const plugins.imagemin = require("gulp-imagemin");
const bs = browserSync.create();

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("dist"));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    files: "dist/**", // 监听路径
    server: {
      baseDir: "dist",
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

// 组合任务
const compile = parallel(style, script, page, image, font);

const build = series(clean, parallel(compile, extra));

module.exports = {
  compile,
  build,
  serve,
};

gulp案例-监视变化以及构建优化

const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const plugins.sass = require("gulp-sass");
// const plugins.babel = require("gulp-babel");
// const plugins.swig = require("gulp-swig");
// const plugins.imagemin = require("gulp-imagemin");
const bs = browserSync.create();

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  //   watch("src/assets/images/**", image);
  //   watch("src/assets/fonts/**", font);
  //   watch("public/**", extra);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: "dist/**", // 监听路径
    server: {
      baseDir: ["dist", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

// 组合任务
const compile = parallel(style, script, page);

const build = series(clean, parallel(compile, image, font, extra));

const develop = series(compile, serve);

module.exports = {
  clean,
  compile,
  build,
  serve,
  develop,
};

gulp案例-useref文件引用处理

  • 问题：
  • 解决方案：
    • 插件安装：yarn add gulp-useref --dev 
    const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const plugins.sass = require("gulp-sass");
// const plugins.babel = require("gulp-babel");
// const plugins.swig = require("gulp-swig");
// const plugins.imagemin = require("gulp-imagemin");
const bs = browserSync.create();

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  //   watch("src/assets/images/**", image);
  //   watch("src/assets/fonts/**", font);
  //   watch("public/**", extra);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: "dist/**", // 监听路径
    server: {
      baseDir: ["dist", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return src("dist/*.html", { base: "dist" })
    .pipe(plugins.useref({ searchPath: ["dist", "."] }))
    .pipe(dest("dist"));
};

// 组合任务
const compile = parallel(style, script, page);

const build = series(clean, parallel(compile, image, font, extra));

const develop = series(compile, serve);

module.exports = {
  clean,
  compile,
  build,
  serve,
  develop,
  useref,
};

gulp案例-文件压缩

  • if判断插件：yarn add gulp-if --dev
  • css压缩插件：yarn add gulp-clean-css --dev
  • js压缩插件：yarn add gulp-uglify --dev
  • html压缩插件：yarn add gulp-htmlmin --dev
const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const plugins.sass = require("gulp-sass");
// const plugins.babel = require("gulp-babel");
// const plugins.swig = require("gulp-swig");
// const plugins.imagemin = require("gulp-imagemin");
const bs = browserSync.create();

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("dist"))
    .pipe(bs.reload({ stream: true }));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  //   watch("src/assets/images/**", image);
  //   watch("src/assets/fonts/**", font);
  //   watch("public/**", extra);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: "dist/**", // 监听路径
    server: {
      baseDir: ["dist", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return (
    src("dist/*.html", { base: "dist" })
      .pipe(plugins.useref({ searchPath: ["dist", "."] }))
      //html css js
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true, // 压缩html
            minifyCSS: true, // 压缩css
            minifyJS: true, // 压缩js
          })
        )
      )
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(dest("release"))
  );
};

// 组合任务
const compile = parallel(style, script, page);

const build = series(clean, parallel(compile, image, font, extra));

const develop = series(compile, serve);

module.exports = {
  clean,
  compile,
  build,
  serve,
  develop,
  useref,
};

gulp案例-重新规划构建过程

const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const plugins.sass = require("gulp-sass");
// const plugins.babel = require("gulp-babel");
// const plugins.swig = require("gulp-swig");
// const plugins.imagemin = require("gulp-imagemin");
const bs = browserSync.create();

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist", "temp"]);
};
const temp = () => {
  return del(["temp"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  //   watch("src/assets/images/**", image);
  //   watch("src/assets/fonts/**", font);
  //   watch("public/**", extra);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: "dist/**", // 监听路径
    server: {
      baseDir: ["temp", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return (
    src("temp/*.html", { base: "temp" })
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      //html css js
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true, // 压缩html
            minifyCSS: true, // 压缩css
            minifyJS: true, // 压缩js
          })
        )
      )
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(dest("dist"))
  );
};

// 组合任务
const compile = parallel(style, script, page);

const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra),
  temp
);

const develop = series(compile, serve);

module.exports = {
  clean,
  compile,
  build,
  serve,
  develop,
  useref,
};

gulp案例-补充

  • package.json:

const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const plugins.sass = require("gulp-sass");
// const plugins.babel = require("gulp-babel");
// const plugins.swig = require("gulp-swig");
// const plugins.imagemin = require("gulp-imagemin");
const bs = browserSync.create();

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist", "temp"]);
};
const temp = () => {
  return del(["temp"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const page = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  //   watch("src/assets/images/**", image);
  //   watch("src/assets/fonts/**", font);
  //   watch("public/**", extra);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: "dist/**", // 监听路径
    server: {
      baseDir: ["temp", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return (
    src("temp/*.html", { base: "temp" })
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      //html css js
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true, // 压缩html
            minifyCSS: true, // 压缩css
            minifyJS: true, // 压缩js
          })
        )
      )
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(dest("dist"))
  );
};

// 组合任务
const compile = parallel(style, script, page);

const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra),
  temp
);

const develop = series(compile, serve);

module.exports = {
  clean,
  build,
  develop,
};
posted @ 2021-01-18 16:42  刘先森的博客  阅读(127)  评论(0)    收藏  举报