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