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: -01-18 18:18:52
* @Last Modified by: Liliang Zhu
* @Last Modified time: -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，项目忙碌，抽空写下博客，有问题可以直接留言
