最近看了下 gulp4.0 的升级, 感觉和 3.0 相比变化还是比较大的, 很多 3.0 的写法和插件会出现一些莫名其妙的变化, 详细的变化就先不说了, 这里我直接把我配置好的代码拿过来吧, 方便各位可以更好的学习和使用 (下面代码经过本人尝试, 可以正确无误的运行)
gulp4.0 https://github.com/blueskyli/gulp 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 文件夹下, 打包上传服务器即可
项目源码地址: https://github.com/blueskyli/gulp-4.0
来源: https://www.cnblogs.com/blueskyli/p/10711616.html