gulp4.0 前端构建脚手架

最近看了下gulp4.0的升级,感觉和3.0相比变化还是比较大的,很多3.0的写法和插件会出现一些莫名其妙的变化,详细的变化就先不说了,这里我直接把我配置好的代码拿过来吧,方便各位可以更好的学习和使用(下面代码经过本人尝试,可以正确无误的运行)gulp4.0github源码1,目录结构app下面的文件夹就不用多介绍了吧,都是存放的一些基本的静态资源,这里着重说下为啥会多了一个tpl文件夹。之所以单...

gulp4.0 前端构建脚手架

最近看了下gulp4.0的升级,感觉和3.0相比变化还是比较大的,很多3.0的写法和插件会出现一些莫名其妙的变化,详细的变化就先不说了,这里我直接把我配置好的代码拿过来吧,方便各位可以更好的学习和使用(下面代码经过本人尝试,可以正确无误的运行)

gulp4.0github源码

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'){}>首页</span> <span @@if(context.index === 'aboutus'){}>关于我们</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' }}//删除distconst 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文件夹下,打包上传服务器即可

项目还没传递到github,等传递后我再更新地址吧

源文地址:https://www.guoxiongfei.cn/cntech/14853.html