gulp学习

任务化 基于流

gulpfile.js

var gulp=require('gulp')

// 注册任务
gulp.task('test_name',function(){

})

// 注册默认任务
gulp.task('default',['teat_name'])

gulp执行错误ReferenceError: primordials is not defined

查明原因 gulp3.9.1版本低了，node 12.18.3版本高了
npm unstall gulp
npm install gulp --save-dev

// 合并压缩js的任务
// 任务分公开和私有
// 公开任务（Public tasks） 从 gulpfile 中被导出（export），可以通过 gulp 命令直接调用。
// 私有任务（Private tasks） 被设计为在内部使用，通常作为 series() 或 parallel() 组合的组成部分
// 私有不能通过gulp调用
// 导出才会被公有

const { series } = require('gulp');

// `clean` 函数并未被导出（export），因此被认为是私有任务（private task）。
// 它仍然可以被用在 `series()` 组合中。
function clean(cb) {
  // body omitted
  cb();
}

// `build` 函数被导出（export）了，因此它是一个公开任务（public task），并且可以被 `gulp` 命令直接调用。
// 它也仍然可以被用在 `series()` 组合中。
function build(cb) {
  // body omitted
  cb();
}

exports.build = build;
exports.default = series(clean, build);
  

// 任务组合
// Gulp 提供了两个强大的组合方法：
//  series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。series() 和 parallel() 可以互相嵌套至任意深度。
// 如果需要让任务（task）按顺序执行，请使用 series() 方法。
// 对于希望以最大并发来运行的任务（tasks），可以使用 parallel() 方法将它们组合起来。
const { series } = require('gulp');
const {parallel } = require('gulp');

function transpile(cb) {
  // body omitted
  cb();
}

function bundle(cb) {
  // body omitted
  cb();
}

exports.default = series(transpile, bundle);
exports.default = parallel(transpile, bundle);

// 任意深度嵌套
exports.build = series(
    clean,
    parallel(
      cssTranspile,
      series(jsTranspile, jsBundle)
    ),
    parallel(cssMinify, jsMinify),
    publish
  );

//   当一个组合操作执行时，这个组合中的每一个任务每次被调用时都会被执行。
// 例如，在两个不同的任务（task）之间调用的 clean 任务（task）将被执行两次，并且将导致不可预期的结果。因此，最好重构组合中的 clean 任务（task）
// 代码重构

// This is INCORRECT
const { series, parallel } = require('gulp');

const clean = function(cb) {
  // body omitted
  cb();
};

const css = series(clean, function(cb) {
  // body omitted
  cb();
});

const javascript = series(clean, function(cb) {
  // body omitted
  cb();
});

exports.build = parallel(css, javascript);

// 重构为
const { series, parallel } = require('gulp');

function clean(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

function javascript(cb) {
  // body omitted
  cb();
}

exports.build = series(clean, parallel(css, javascript));

千锋教育 glupglup

gulp常见API





series逐个执行，parallel并行执行

打包css文件过程

打包sass文件

直接gulp-sass很容易失败

打包js

打包html

checked=‘checked’ ⇒ checked

打包image文件、viedo、audios文件

 打包第三方文件、fonts文件  ### 配置默认任务，所有一起执行

series

module.export.abc=gulp.series(....)
$ gulp abc

module.export.default=gulp.series(....)
$ gulp default
$ gulp 

创建一个删除任务

gulp启动服务

自定义域名



gulp代理配置

创建一个监控任务

gulp配置导入组件

引用的内容不一样

有的地方显示，有的地方不显示

)