使用gulp进行原生项目打包压缩

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,//省略布尔属性的值  ==> 
        removeEmptyAttributes: true,//删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true,//删除