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，项目忙碌，抽空写下博客，有问题可以直接留言