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 {
  src,
  dest,
  series,
  parallel,
  watch,
} from 'gulp';

// 本地服务同步刷新
import browser from 'browser-sync';
const browserSync = browser.create();
// 引入功能组件
import del from 'del';
import convertLess from './convert-less';
import convertJs from './convert-js';
import convertHtml from './convert-html';
import copyFile from './static-copy';

// 域名与站点名称
const host = {
  hostName: 'macw',
  hostTitle: 'Macw网'
};

// 开发项目类型
const devType = 'pc';

// 本地目录
const filePath = `project/${devType}/`;
// 生产目录
const distResourcesPath = `xs_cms/pub_${devType}/assets/`;
const distPagesPath = `xs_cms/app/${devType}/view/`;
// 资源路径
const baseProjectPath = '/assets/';

// 打印提示颜色
const word_color = '\x1b[91m'; // 橘黄

// 删除css文件
export const delCssFile = () => {
  console.log(word_color, `${new Date()} 清除css`);
  return del([
    `${distResourcesPath}css`
  ])
};

// 删除js文件
export const delJsFile = () => {
  console.log(word_color, `${new Date()} 清除js`);
  return del([
    `${distResourcesPath}js`
  ])
};

// 删除资源文件夹
export const delStaticFile = () => {
  console.log(word_color, `${new Date()} 清除资源`);
  return del([
    `${distResourcesPath}images`,
    `${distResourcesPath}fonts`,
  ])
};
// 导出任务
// 复制文件
export const copyStatic = cb => {
  console.log(word_color, `${new Date()} copy资源`);
  copyFile(filePath, distResourcesPath);
  cb();
};

// 复制js静态文件
export const copyJs = () => {
  console.log(word_color, `${new Date()} copy静态js`);
  return src(`${filePath}es6/static/**`)
    .pipe(dest(`${distResourcesPath}js/static`));
};

// 编译css
export const compileCss = series(delCssFile, cb => {
  console.log(word_color, `${new Date()} 编译css`);
  convertLess(filePath, distResourcesPath);
  cb();
});
// 编译js
export const compileJs = series(delJsFile, cb => {
  console.log(word_color, `${new Date()} 编译js`);
  convertJs(filePath, distResourcesPath, host);
  cb();
});

// 编译html
export const freshHtml = cb => {
  console.log(word_color, `${new Date()} 编译html`);
  convertHtml(filePath, distPagesPath, baseProjectPath, host);
  cb();
};


// 监测文件变化
let watchFiles = () => {
  browserSync.init({});

  watch(`${filePath}less/**/*.less`, {
    delay: 500,
  }, compileCss);

  watch(`${filePath}es6/**/*.js`, {
    delay: 500,
  }, series(compileJs, copyJs));

  watch(`${filePath}pages/**`, {
    delay: 500,
  }, freshHtml);

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

// 默认任务
exports.default = series(parallel(compileCss, series(compileJs, copyJs)), series(delStaticFile ,copyStatic), freshHtml, watchFiles);

　　不同任务可以提取出不同文件，例如less转译压缩功能convert-less.js， 代码如下：

/*
 * @Author: itmrzhu
 * @Date: 2020-01-18 18:18:52 
 * @Last Modified by: Liliang Zhu
 * @Last Modified time: 2020-02-26 14:50:57
 * 编译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();

let convertLess = (file, dist) => {
  return src(`${file}less/*.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，项目忙碌，抽空写下博客，有问题可以直接留言