前端工程化篇之 gulp 一文讓您輕鬆掌握gulp 【全套gulp原始碼註釋解析】

gulp 是一個構建工具，基於Node.js的平臺執行，使用的是commonJs的模組化語法。
我們使用gulp需要用到的包
一個TASK任務，對應一個包，對應一個處理邏輯、
gulp.series對應的是同步任務，從左到右，依次執行任務。時間長
gulp.parallel對應的是非同步任務，效率高，時間短。
gulp.src 表明檔案從哪裡讀取
gulp.dest 表明檔案輸出到哪

const gulp = require('gulp');   //gulp的包 
const eslint = require('gulp-eslint'); //eslint的包  語法檢查 
const babel = require('gulp-babel');      //編譯ES語法的babel包 
const browserify = require('gulp-browserify');  //編譯commonJs語法的工具
const rename = require("gulp-rename");    //重新命名檔案的包
const less = require('gulp-less');   // 識別less檔案的gulp的包
const livereload = require('gulp-livereload');   //監控檔案的包
const connect = require('gulp-connect');    // 熱更新的包
const open = require("open");   //開啟網頁的包
const uglify = require('gulp-uglify');   //壓縮JS程式碼的包
const LessAutoprefix = require('less-plugin-autoprefix'); //將LESS檔案混合的外掛包
// https://github.com/browserslist/browserslist   
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });  //擴充CSS識別的包
const cssmin = require('gulp-cssmin');  //壓縮CSS的包
const concat = require('gulp-concat');   //合併檔案的包 
const htmlmin = require('gulp-htmlmin');  //壓縮HTML的包 


// 註冊任務
/*
  開發套路：
    1. 去https://gulpjs.com/plugins/搜相關的外掛  gulp-xxx
    2. 開啟外掛的npm倉庫 看文件使用
    3. 下載並引入gulp外掛
    4. 配置外掛任務
 */

// 語法檢查  必須有一個eslint的配置檔案
gulp.task('eslint', function () {
  // 讀取所有的js檔案， 返回值就是一個可讀流
  return gulp.src(['src/js/*.js'])
    // 對流中的檔案/資料進行語法檢查
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(livereload());
})

// 語法轉換
// babel能將es6模組化語法轉換為commonjs模組化語法
// 能將es6及其以上的語法轉換為es5及其以下的語法
gulp.task('babel', () =>
  // 讀取所有js檔案
  gulp.src('src/js/*.js')
    // 進行語法轉換
    .pipe(babel({
      presets: ['@babel/preset-env'] //此處需要修改，官網有誤
    }))
    // 輸出出去
    .pipe(gulp.dest('build/js'))
    .pipe(livereload())
);

// 將commonjs的模組化語法轉換成瀏覽器能識別語法
gulp.task('browserify', function() {
  // 只要放入口檔案
  return gulp.src('build/js/app.js')
    .pipe(browserify())
    // 重新命名檔案
    .pipe(rename("built.js"))
    .pipe(gulp.dest('build/js'))
    .pipe(livereload());
});

// 壓縮js程式碼
gulp.task('uglify', function () {
  return gulp.src('./build/js/built.js')
    .pipe(uglify())
    .pipe(rename('dist.min.js'))
    .pipe(gulp.dest('dist/js'))
})

// 將less編譯成css
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build/css'))
    .pipe(livereload());
});

// 壓縮css
gulp.task('css', function () {
  return gulp.src('./src/less/*.less')
    .pipe(concat('dist.min.css'))
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
});

// 壓縮html
gulp.task('html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true, // 去除空格
      removeComments: true // 去掉註釋
    }))
    .pipe(gulp.dest('dist'));
});

// 自動化 --> 自動編譯  --> 自動重新整理瀏覽器（熱更新） --> 自動開啟瀏覽器
gulp.task('watch', function() {
  livereload.listen();
  // 開啟伺服器
  connect.server({
    name: 'Dev App',
    root: ['build'],
    port: 3000,
    livereload: true  //熱更新
  });
  // 開啟瀏覽器
  open('http://localhost:3000');
  
  // 監視指定檔案，一旦檔案發生變化，就執行後面的任務
  gulp.watch('src/less/*.less', gulp.series('less'));
  gulp.watch('src/js/*.js', gulp.series('js-dev'));
});

// 配置預設任務 --> 執行以上多個任務
gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); // 同步順序執行，同一時間只能執行一個任務  速度慢
gulp.task('js-prod', gulp.series('js-dev', 'uglify'));
// gulp.task('default', gulp.parallel('eslint', 'babel', 'browserify')); // 非同步執行，同一時間執行多個任務   速度快
gulp.task('build', gulp.parallel('js-dev', 'less'));
// 生產環境的指令: gulp prod
gulp.task('prod', gulp.parallel('js-prod', 'css', 'html'));
// 開發環境的指令： gulp start
gulp.task('start', gulp.series('build', 'watch'));
複製程式碼

前端工程化篇之 gulp 一文讓您輕鬆掌握gulp 【全套gulp原始碼註釋解析】

相關文章