Angular 代码的压缩

Angular的项目如果很多人去写去维护,那么很可能会碰到写的不规范(没有使用数组的方式注入依赖),然后js压缩时候的报错,推荐一个很好的gulp插件实现Angular 代码的自动规范化(gulp-ng-annotate),解决压缩报错的问题。
ps:顺便介绍一下压缩代码的开发环境以及生产环境的部署(用到了gulp-html-replace)。废话不多说,看代码。

gulp压缩以及生成唯一名称的js和css,并替换掉html页面的压缩后的js和css(唯一名称的css和js文件能保证用户在你更新页面以后去请求你新的js,解决catch的问题)

var gulp = require('gulp');  
var concat = require('gulp-concat');  
var uglify = require('gulp-uglify');  
var cssmin = require('gulp-cssmin');  
var del = require('del');  
var ngAnnotate = require('gulp-ng-annotate');  
var wrap = require('gulp-wrap');  
var expressService = require('gulp-express-service');  
var htmlreplace = require('gulp-html-replace');  
var uuid = require('node-uuid');  
var wwwroot = './kendo/';  
var production_version_uuid = '.' + uuid.v1();  
var paths = {  
  index: [wwwroot + 'index.html'],
  scripts: [wwwroot + 'scripts/main.js', wwwroot + 'scripts/**/*.js'],
  styles: [wwwroot + 'styles/main.css', wwwroot + 'styles/**/*.css'],
  templates: [wwwroot + 'templates/**/*.html'],
  services: ['app/**/*.js', 'config/**/*.js', 'portal-service.js', 'service.js']
};
gulp.task('clean', function () {  
  return del([wwwroot + 'min']);
});

gulp.task('scripts', function () {  
  gulp.src(paths.scripts)
    .pipe(ngAnnotate())
    .pipe(concat('m.js'))
    .pipe(wrap('(function(window){\n"use strict"\n<%= contents %>\n})(window);'))
    .pipe(concat('app.js'))
    .pipe(gulp.dest(wwwroot + 'min'))
    .on('error', function (e) {
      console.log(e.message, e.stack);
    });
});
//js压缩并生成唯一的uuid  生产环境

gulp.task('scriptsUid', function () {  
  gulp.src(paths.scripts)
    .pipe(ngAnnotate())
    .pipe(concat('m.js'))
    .pipe(wrap('(function(window){\n"use strict"\n<%= contents %>\n})(window);'))
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(concat('app.min' + production_version_uuid + '.js'))
    .pipe(gulp.dest(wwwroot + 'min'))
    .on('error', function (e) {
      console.log(e.message, e.stack);
    });
});

gulp.task('styles', function () {  
  return gulp.src(paths.styles)
    .pipe(concat('app.css'))
    .pipe(gulp.dest(wwwroot + 'min'));
});
////css压缩并生成唯一的uuid  生产环境
gulp.task('stylesUid', function () {  
  return gulp.src(paths.styles)
    .pipe(concat('app.css'))
    .pipe(cssmin())
    .pipe(concat('app.min' + production_version_uuid + '.css'))
    .pipe(gulp.dest(wwwroot + 'min'));
});

gulp.task('run_service', function () {  
  return gulp.src(['./portal-service.js'])
    .pipe(expressService({
      file: './portal-service.js'
    }))
    .on('error', function (e) {
      console.log(e.message, e.stack);
    });
});
//替换页面的css和js加入
gulp.task('templates', function () {  
  gulp.src(paths.index)
    .pipe(htmlreplace({
      'js': '/min/app.js'
    }, {
      keepUnassigned: true,
      keepBlockTags: true,
      resolvePaths: false
    }))
    .pipe(htmlreplace({
      'css': '/min/app.css'
    }, {
      keepUnassigned: true,
      keepBlockTags: true,
      resolvePaths: false
    }))
    .pipe(gulp.dest(wwwroot));
});
//替换页面的css和js加入uuid  生产环境
gulp.task('templatesUid', function () {  
  gulp.src(paths.index)
    .pipe(htmlreplace({
      'js': '/min/app.min' + production_version_uuid + '.js'
    }, {
      keepUnassigned: true,
      keepBlockTags: true,
      resolvePaths: false
    }))
    .pipe(htmlreplace({
      'css': '/min/app.min' + production_version_uuid + '.css'
    }, {
      keepUnassigned: true,
      keepBlockTags: true,
      resolvePaths: false
    }))
    .pipe(gulp.dest(wwwroot));
});


gulp.task('watch', function () {  
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.templates);
  gulp.watch(paths.styles, ['styles']);
  gulp.watch(paths.services, ['run_service']);
});

gulp.task('default', ['clean', 'scripts', 'styles', 'templates', 'run_service', 'watch']);  
gulp.task('build', ['clean', 'scriptsUid', 'stylesUid', 'templatesUid']);//部署的时候需要gulp build这样生成压缩后的js和css并且替换掉index.html的js和css  
gulp.task('buildold', ['scripts', 'styles', 'templates']);  

index.html 里面的内容

这个标签里的内容就是你的build的时候去替换的js和css的script标签,详细的用法请看 gulp-html-replace

<!-- build:js -->  
<script src="/min/app.js"></script>  
<!-- endbuild -->  
 <!-- build:css -->
    <link rel="stylesheet" href="/min/app.css">
 <!-- endbuild -->

有啥问题请,直接评论,希望共同进步

李文杰

前端程序设计,人丑、家穷、没文化 myGit: https://github.com/JosnLee

北京市朝阳区成寿寺