gulp压缩混淆AngularJS+RequireJS

显示全部楼层 · 2017-4-10 16:42:18

RequireJS模块的合并压缩还是比较简单的，但是遇到AngularJS，在压缩混淆合并就有些问题，在网上找了些资料，大部分都没个解决方案，只有自己琢磨了
经过多次混淆压缩，以下成功的处理了混淆跟压缩，但是无法合并
//引入模块
var gulp = require("gulp");
var jshint = require("gulp-jshint");
var uglify = require("gulp-uglify");
var ngmin = require("gulp-ngmin");
var concat = require('gulp-concat');
var cssmin  =require("gulp-clean-css");
var annotate = require("gulp-ng-annotate");
var stripDebug = require("gulp-strip-debug");
gulp.task("jsHint",function(){
gulp.src(["./product/js/*.js","./libs/**/*.js"])
      .pipe(jshint())// 进行检查
      .pipe(jshint.reporter("default"));// 对代码进行报错提示
})
gulp.task("testCssmin",function(){
gulp.src(["./product/css/*.css"])
      .pipe(cssmin())
      .pipe(gulp.dest("./dabaofinancing-gupiao/product/css/"));
gulp.src(["./libs/css/*.css"])
      .pipe(cssmin())
      .pipe(gulp.dest("./dabaofinancing-gupiao/libs/css/"));
})
gulp.task("jsmin",function(){
gulp.src(["./*.js"])
      .pipe(annotate())
      .pipe(ngmin({dynamic: false}))
      .pipe(annotate({outSourceMap: false}))
      .pipe(uglify({//模块化文件不能进行混淆处理不然会导致angular模块丢失
         mangle:false,
         compress:true
      }))
      .pipe(gulp.dest('./dabaofinancing-gupiao/'));
      //.pipe(uglify())
      //.pipe(gulp.dest('./dabaofinancing-gupiao/'));
gulp.src(["./product/*.json"])
      .pipe(gulp.dest('./dabaofinancing-gupiao/product/'))
gulp.src(["./product/js/*.js"])
      .pipe(annotate())
      .pipe(ngmin({dynamic: false}))
      .pipe(stripDebug())//给模块文件格式化
      .pipe(annotate({outSourceMap: false}))
      .pipe(uglify({
         mangle:true,//混淆
         compress:true//压缩
      }))
      .pipe(gulp.dest('./dabaofinancing-gupiao/product/js/'))
      //.pipe(uglify())
      //.pipe(gulp.dest('./dabaofinancing-gupiao/product/js/'));
gulp.src(["./libs/js/*.js"])
      .pipe(annotate())
      .pipe(ngmin({dynamic: false}))
      .pipe(annotate({outSourceMap: false}))
      .pipe(uglify({
         mangle:true,//混淆
         compress:true//压缩
      }))
      .pipe(gulp.dest('./dabaofinancing-gupiao/libs/js/'));
      //.pipe(uglify())
      //.pipe(gulp.dest('./dabaofinancing-gupiao/libs/js/'));
})
var src = ["img","svgs"]

gulp.task("copy",function(){
for (var i = 0; i < src.length; i++) {
      var path = "./product/"+src[i]+"/**/*.*";
      var output = './dabaofinancing-gupiao/product/'+src[i];
      gulp.src(path)
      .pipe(gulp.dest(output));
};
gulp.src(["./*.html"])
      .pipe(gulp.dest('./dabaofinancing-gupiao/'));
gulp.src(["./product/*.html"])
      .pipe(gulp.dest('./dabaofinancing-gupiao/product/'));
gulp.src(["./*.properties"])
      .pipe(gulp.dest('./dabaofinancing-gupiao/'));

})

gulp.task("default", ["testCssmin", "jsmin", "copy"]);
在模块里面我们需要以数组的形式来保证变量名在混淆之后不会丢失：define(['angular', 'text!product/addAddress.html','common'], function (angular, tpl,com) {
//angular会自动根据controller函数的参数名，导入相应的服务
return {
      controller:["$scope","$location","$routeParams", "$http",function ($scope,$location,$routeParams, $http){    }],       tpl: tpl
};
});然后就可以通过命令行去执行混淆压缩了，如果有能够有办法有合并的方法欢迎来讨论