最近看了下gulp4.0的升級，感覺和3.0相比變化還是比較大的，很多3.0的寫法和插件會出現一些莫名其妙的變化，詳細的變化就先不說了，這里我直接把我配置好的代碼拿過來吧，方便各位可以更好的學習和使用（下面代碼經過本人嘗試，可以正確無誤的運行）
gulp4.0 github源碼
1，目錄結構
app下面的文件夾就不用多介紹了吧，都是存放的一些基本的靜態資源，這里着重說下為啥會多了一個tpl文件夾。
之所以單獨列出一個tpl文件夾其實是為了使用gulp-file-include，里面其實存放的是一些html的模板，
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/styles.css" />
<script type="text/javascript" src="./js/index.js"/>
</head>
<body>
@@include('./header.html',{"index":"index"})
hello I am the demo page
<div class="main">mickey</div>
<!-- footer -->
@@include('./footer.html',{"param": "我是傳遞過來的備案號","index":"index"})
</body>
</html>
_include/footer.html
<div>footer @@param</div>
_include/header.html
<div>
<span @@if(context.index === 'index'){style='color:red'}>首頁</span>
<span @@if(context.index === 'aboutus'){style='color:red'}>關於我們</span>
</div>
具體語法我就不解釋了，知道tpl里面存放的是什么東西就可以了。
2，package.json
{
"name": "mickey-gulp-demo1",
"version": "1.0.0",
"description": "this is a demo project",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"gulp"
],
"author": "mickey007@163.com",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"autoprefixer": "^9.5.1",
"babel-preset-env": "^1.7.0",
"browser-sync": "^2.26.3",
"del": "^4.1.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-file-include": "^2.0.1",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^5.0.3",
"gulp-load-plugins": "^1.5.0",
"gulp-make-css-url-version": "^0.0.13",
"gulp-postcss": "^8.0.0",
"gulp-rev": "^9.0.0",
"gulp-rev-all": "^1.0.0",
"gulp-rev-collector": "^1.3.1",
"gulp-rev-replace": "^0.4.4",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.2",
"gulp-useref": "^3.1.6",
"gulp-watch": "^5.0.1"
}
}
這個配置文件就比較重要了，所有的包和版本都在這里，使用的時候不要忘記執行 npm install 哦
3，gulpfile.js
const {src, dest, watch, series, parallel} = require('gulp')
const del = require('del');
//處理md5文件名
const revAll = require('gulp-rev-all');
const revReplace = require('gulp-rev-replace');
const cssver = require('gulp-make-css-url-version');
const sass=require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cleancss = require('gulp-clean-css');
const babel=require('gulp-babel');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin')
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const connect = require('gulp-connect');
//配置路徑
const baseUrl = './app/';
const distUrl = './dist/';
const tplUrl = './tpl/';
const configUrl = {
file: {
css: baseUrl + 'css/**/*.css',
scss: baseUrl + 'scss/**/*.scss',
images: baseUrl + 'images/**/*',
js: baseUrl + 'js/**/*.js',
libs: baseUrl + 'js/libs/**/*.js',
fonts: baseUrl + 'fonts/**/*',
html: baseUrl + '**/*.html',
tpl: tplUrl + '**/*.html',
tpl_include: tplUrl + '_include/**/*.html'
},
folder: {
css: baseUrl + 'css',
html: baseUrl
},
dist: {
css: distUrl + 'css',
images: distUrl + 'images',
js: distUrl + 'js',
html: distUrl,
rev: distUrl + 'rev'
}
}
//刪除dist
const clean = () => del([distUrl])
//刪除生成的html文件，保留文件夾
const cleanHtml = () => del([configUrl.file.html])
const scss = () => src(configUrl.file.scss)
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer(
{
// 兼容主流瀏覽器的最新兩個版本
browsers: ['last 2 versions'],
// 是否美化屬性值
cascade: false
}
)]))
.pipe(dest(configUrl.folder.css));
const baleCss = () => src(configUrl.file.css)
.pipe(cssver())
.pipe(cleancss({
compatibility: 'ie7',//保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
format: 'keep-breaks',//是否保留換行
keepSpecialComments: '*'//保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴
}))
.pipe(revAll.revision({"fileNameManifest":"rev-css-manifest.json"}))
.pipe(dest(configUrl.dist.css))
.pipe(revAll.manifestFile())
.pipe(dest(configUrl.dist.rev));
const baleJs = () => src([configUrl.file.js,'!' + configUrl.file.libs])
.pipe(babel({ presets: ['@babel/env'] })) // ES6轉ES5
.pipe(uglify({
mangle:true,//類型：Boolean 默認：true 是否修改變量名 排除混淆關鍵字
compress:true,//類型：Boolean 默認：true 是否完全壓縮
}))
.pipe(revAll.revision({"fileNameManifest":"rev-js-manifest.json"}))
.pipe(dest(configUrl.dist.js))
.pipe(revAll.manifestFile())
.pipe(dest(configUrl.dist.rev));
const baleImages = () => src(configUrl.file.images)
.pipe(imagemin({
progressive: true,//類型：Boolean 默認：false 多次優化svg直到完全優化
svgoPlugins: [{removeViewBox: false}]//不要移除svg的viewbox屬性
}))
.pipe(dest(configUrl.dist.images))
// const baleHtml = () => src([baseUrl + 'index.html',baseUrl + 'views/*.html'],{base: baseUrl})
const baleHtml = () => src(configUrl.file.html)
.pipe(htmlmin({
removeComments: true,//清除HTML注釋
collapseWhitespace: true//壓縮HTML
}))
.pipe(revReplace({manifest:src(configUrl.dist.rev + '/*.json')}))
.pipe(dest(configUrl.dist.html));
const baleCopy = () => src([configUrl.file.fonts,configUrl.file.libs],{base: baseUrl})
.pipe(dest(distUrl))
const file = () => src([configUrl.file.tpl,'!' + configUrl.file.tpl_include])
.pipe(fileinclude({
prefix: '@@',//變量前綴 @@include
basepath: './tpl/_include',//引用文件路徑
indent:true//保留文件的縮進
}))
.pipe(dest(configUrl.folder.html));
const reload = () => src(configUrl.file.html)
.pipe(connect.reload());
const watchs = () => {
watch(configUrl.file.tpl,series(cleanHtml,file));
watch(configUrl.file.scss,scss);
watch(baseUrl + "**/*.*", reload);
connect.server({
root: baseUrl,
port: 8080,
livereload: true,
});
}
exports.file = file;
exports.clean = clean;
//啟動項目
exports.default = watchs;
//打包項目
exports.build = series(clean,parallel(baleCss, baleJs, baleImages, baleCopy),baleHtml);
這里本地調試我使用的app文件夾下面的代碼，執行gulp watchs 或者 gulp 后會啟動一個本地服務來運行app下面的代碼
gulp build 是打包生產的代碼，打包的地址在根目錄的dist文件夾下，打包上傳服務器即可