gulp4 多頁面項目管理打包（html, es6，less編譯壓縮版本控制）

1.如何使用

gulp4自動化構建工具，讓所有變的簡單起來，那么需要怎么使用呢？

官網入口 按照官網安裝工具與依賴

2.項目結構

-- gulp4

　　-- gulpfile.babel.js

　　　　- index.js

　　　　- **其他配置項

　　-- node_modules

　　-- project 項目地址

　　　　- css

　　　　- js

　　　　- pages

　　　　- images

　　- .babelrc

　　- package-lock.json

　　- package.json

　　- webpack.config.js

3. 多頁面配置 

入口文件做最后處理

// gulpfile.babel.js -- index.js

import {
  series,
  parallel,
  watch,
} from 'gulp';
import del from 'del';
// 本地服務同步刷新
import browser from 'browser-sync';
const browserSync = browser.create();
// 引入功能組件
import convertLess from './convert-less';
import convertJs from './convert-js';
import convertHtml from './convert-html';
import copyFile from './static-copy';

// 是否開發環境
let isDev = true;

// 開發項目類型
const devType = 'pc';

// 本地目錄
const filePath = 'project/' + devType + '/';
// 生產目錄
const distResourcesPath = 'dist/' + devType + '/assets/';
const distPagesPath = 'dist/' + devType + '/view/';
// 資源路徑
const basePath = '../assets/';

// 刪除css文件
export const delCssFile = () => {
  return del([
    distResourcesPath + 'css'
  ])
}

// 刪除js文件
export const delJsFile = () => {
  return del([
    distResourcesPath + 'js'
  ])
}

// 刪除資源文件夾
export const delStaticFile = () => {
  return del([
    distResourcesPath + 'images',
    distResourcesPath + 'fonts',
  ])
}
// 導出任務
// 復制文件
export const copyStatic = cb => {
  copyFile(filePath, distResourcesPath);
  cb();
}
// 編譯css
export const compileCss = series(delCssFile, cb => {
  convertLess(filePath, distResourcesPath);
  cb();
});
// 編譯js
export const compileJs = series(delJsFile, cb => {
  convertJs(filePath, distResourcesPath);
  cb();
});

// 編譯html
export const freshHtml = cb => {
  convertHtml(filePath, distPagesPath, basePath);
  cb();
};


// 監測文件變化
let watchFiles = () => {
  browserSync.init({});

  watch(filePath + 'css/**/*.less', {
    delay: 500,
  }, compileCss);

  watch(filePath + 'js/**/*.js', {
    delay: 500,
  }, compileJs);

  watch(filePath + 'pages/**', {
    delay: 500,
  }, freshHtml);

  watch(filePath + 'mapjson/**/*.json', {
    delay: 500,
  }, freshHtml);
}

// 默認任務
exports.default = series(parallel(compileCss, compileJs), freshHtml, copyStatic, watchFiles);

　　不同任務可以提取出不同文件，例如less轉譯壓縮功能convert-less.js， 代碼如下：

/*
 * @Author: ZLL 
 * @Date: 2020-01-18 18:18:52 
 * @Last Modified by:   Liliang Zhu 
 * @Last Modified time: 2020-01-18 18:18:52 
 * 編譯less
 */

// gulp模塊
import {
  src,
  dest,
  lastRun
} from 'gulp';

// less語法轉譯
import less from 'gulp-less';
// css添加前綴
import lessAutoperfix from 'less-plugin-autoprefix';
// 壓縮css
import mixCss from 'gulp-clean-css';
// 僅編譯改變的文件
import changed from 'gulp-changed';
// 重命名
import rename from 'gulp-rename';
// 生成版本號
import rev from 'gulp-rev';
// 本地服務同步刷新
import browser from 'browser-sync';
const browserSync = browser.create();

// css編譯前綴
const autoprefix = new lessAutoperfix({
  browsers: [
    ">0.25%",
    "last 2 version",
  ]
});

let convertLess = (file, dist) => {
  return src(file + 'css/*.less', {
      since: lastRun(convertLess, 100)
    })
    .pipe(less({
      plugins: [autoprefix]
      // 生成前綴
    }))
    .pipe(mixCss({
      keepSpecialComments: '*'
      //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴
    }))
    .pipe(rename(path => path.basename += '.min'))
    .pipe(rev())
    .pipe(dest(dist + 'css'))
    .pipe(rev.manifest())
    .pipe(dest(file + 'mapjson/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
}

export default convertLess;

　　　在入口index.js中引入調用即可，

4. 全部gulp4代碼

代碼全部托管在github，項目忙碌，抽空寫下博客，有問題可以直接留言