gulp构建原生项目-打包与压缩

gulp官网

1、图解

gulp.png
gulp-build.png

2、 环境支持

安装node
全局安装 gulp/gulp-cli

3、业务gulpfile.js脚手架解析

注意事项

项目内文件名引入需要从public开始(../../public/....)
尽量不在css内将图片写成背景(可转换成base64)
文件名命名:所有文件名命名不能相同(公共模块与功能内部公共模块命名分开)
每次重新发布之后会导致首屏加载变慢(仅仅只是发布之后,会加载新文件)

3.1、插件准备

const gulp = require('gulp');
const babel = require('gulp-babel');//把es6语法解析成es5
const concat = require('gulp-concat');//合并
const uglify = require('gulp-uglify');//压缩
const rev = require('gulp-rev');//对文件名加MD5后缀
const revCollector = require('gulp-rev-collector');//替换路径
const htmlmin = require('gulp-htmlmin'); //压缩html里面的js，css，去除空格
const del = require('del');//删除文件

在package.json中逐个添加插件

---

3.2、业务gulpfile.js脚本解析

3.2.1、建立js处理任务

获取所有需要处理的js文件
对文件名添加MD5后缀
压缩文件,es6解析成es5 (不启用压缩生产环境需要调试,不启用es6转es5保持es6特性,防止产生不必要问题)

gulp.task('js',async function(){
        /////获取publick/js下所有文件夹以下的.js文件
        return gulp.src('./public/js/**/*.js')
        .pipe(rev())//添加MD5文件后缀
        .pipe(gulp.dest('./build/public/js'))//保存文件
        .pipe(rev.manifest('rev-js-manifest.json'))//生成原始文件名与添加MD5文件名的json对象文件
        .pipe(gulp.dest('./build/json'));//将json文件名保存至build/json文件夹下
});

---

3.2.2、建立处理css任务

引入 css兼容处理插件
引入css压缩插件

const autoprefix = require('gulp-autoprefixer');//兼容处理
const minifyCss = require('gulp-minify-css');//压缩
gulp.task('style',async function(){
    return gulp.src('./public/css/**/*.css')
        .pipe(autoprefix({
                browsers: ['last 2 versions'],
                cascade: false
            }))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./build/public/css'))
        .pipe(rev.manifest('rev-css-manifest.json'))
        .pipe(gulp.dest('./build/json'));
});

---

3.2.3、建立处理img任务

gulp.task('images', async function (){
    return gulp.src(['./public/images/**/*.jpg',
    './public/images/**/*.png',
    './public/images/**/*.gif',
    './public/images/**/*.svg'],{allowEmpty : true})
        .pipe(rev())//文件名加MD5后缀
        .pipe(gulp.dest('./build/public/images'))
        .pipe(rev.manifest('rev-images-manifest.json'))
        .pipe(gulp.dest('./build/json'));
});

---

3.2.4、建立移动无需处理插件任务

gulp.task('data',async function(){
    return gulp.src(['./public/data/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/data'));
});
gulp.task('fonts',async function(){
    return gulp.src(['./public/fonts/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/fonts'));
});
gulp.task('vendor',async function(){
    return gulp.src(['./public/vendor/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/vendor'));
});
gulp.task('themes',async function(){
    return gulp.src(['./public/themes/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/themes'));
});

---

3.2.5、建立处理个别无需更改的文件

//移动images文件夹下图片(只移动文件,不处理其余文件夹下)
gulp.task('imageCopy',async function(){
    return gulp.src(['./public/images/*.jpg',
    './public/images/*.png',
    './public/images/*.gif',
    './public/images/*.svg'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/images'));
});

---

3.2.6、建立处理html文件任务

//html压缩
gulp.task('revHtml',async function(){
    const options = {
        removeComments: true,//清除HTML注释
        // collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        babel:true,
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('./html/**/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./build/html'))
});

---

3.2.7、建立css内处理图片名称任务|js内处理文件名称任务

gulp.task('revimg', async function() {
    //css，主要是针对img替换
    return gulp.src(['./build/json/rev-images-manifest.json', './build/css/**/*.css'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./build/css'));
});
gulp.task('revjs', async function() {
    //css，主要是针对img替换
    return gulp.src(['./build/json/rev-js-manifest.json', './build/js/**/*.js'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true,
         }))
        .pipe(gulp.dest('./build/public/js'));
});

---

3.2.8、建立处理html文件内处理引入文件名任务

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', async function() {
    //html，针对js,css,img
    return gulp.src(['./build/json/**/*.json', './build/html/**/*.html'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./build/html'));
});

---

3.2.9、建立处理js文件内处理引入文件名任务

gulp.task('processJS', async function() {
    //js，针对所有文件名
    return gulp.src(['./build/json/**/*.json', './build/public/js/**/*.js'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./build/public/js'));
});

4、命令运行

4.1、初始化准备

//执行多个任务gulp4的用法 gulp.series()串行，gulp.parallel()并行
gulp.task('default',
    gulp.series('clean:Build', gulp.parallel('images','style','data','themes','fonts','vendor','imageCopy','revHtml','js'),'revimg','revjs',async function(){

}))

---

4.2、build文件处理

    gulp.task('build',gulp.parallel('rev','processJS'),async function(){})

---