gulp4.0 前端构建脚手架

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

项目源码地址:https://github.com/blueskyli/gulp-4.0 

posted @ 2019-04-15 17:00 mickey007 阅读(...) 评论(...) 编辑 收藏