使用gulp压缩并合并AngularJS代码

来源：互联网发布：封面设计知乎编辑：程序博客网时间：2024/06/11 16:56

我们的移动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"  }}

1 0