我们的移动web项目使用gulp作为自动化部署工具,由于移动设备4G流量费比较贵,一般我们做移动Web App项目正式发布时都需要把js代码进行压缩以便节省流量。包括使用的第三方js框架,正式发布时也应该使用压缩后的版本。对于自己写的js代码,因为现在是模块化开发,js文件比较多,需要先合并成一个文件后,去除log,进行压缩,基于gulp的管道式命令,实现这些还是很容易的。部分代码如下:
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var ngmin = require('gulp-ngmin');
var stripDebug = require('gulp-strip-debug');
gulp.task('minify', function() {
return gulp.src('./www/js/**/*.js')
.pipe(ngmin({dynamic: false}))
.pipe(stripDebug())
.pipe(uglify({outSourceMap: false}))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./www/js/'))
});
需要的gulp插件可以在package.json文件(如下)配置后,通过npm install命令下载安装。
{
"name": "ionic-project",
"version": "1.0.0",
"description": "An Ionic project",
"dependencies": {
"gulp": "^3.5.6",
"gulp-sass": "^0.7.1",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.0",
"gulp-rename": "^1.2.0"
},
"devDependencies": {
"bower": "^1.3.3",
"gulp-jshint": "^1.9.0",
"gulp-ngmin": "^0.3.0",
"gulp-replace": "^0.5.0",
"gulp-rimraf": "^0.1.1",
"gulp-strip-debug": "^1.0.2",
"gulp-uglify": "^1.0.1",
"gulp-util": "^2.2.14",
"jshint-stylish": "^1.0.0",
"shelljs": "^0.3.0"
}
}