最近看了下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": "[email protected]", "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文件夹下,打包上传服务器即可