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，項目忙碌，抽空寫下博客，有問題可以直接留言

總結

以上是生活随笔為你收集整理的dist包编译html_gulp4 多页面项目管理打包（html, es6，less编译压缩版本控制）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。