angular的gulp自动化解决方案

2019独角兽企业重金招聘Python工程师标准>>>

先说一下本地开发环境。

• 使用IDEA开发工具+tomcat
• 前后端分离，分为2个工程。只需要对前端压缩
• 使用angular框架，零碎的js，css异常多
• 本地使用maven打包，每次发布前会把前端代码打包为front.war文件放到服务器。文件会自动放到target目录中。

一.设计自动化解决方案

既然决定做了，我想使用gulp，好处是用户多，构建方便。

我的计划

1. 清空目标文件，build文件夹(我计划把所有的src目录中的文件都移动到build目录。buil目录中存放的都是压缩后文件)
2. 压缩js，css，image，图片，html等文件
3. 对这些静态文件生成md5后缀名。主要是起到防止缓存污染。
4. 文件替换，

本来有文件合并替换的想法，后来没找到合适的方法，就暂时跳过了。

二.进行前期准备工作

1.安装node和npm

node是执行环境，npm是node的包管理系统。在新版本中，npm已经被集成到了node中

node的下载地址https://nodejs.org/en/download/

查看是否安装成功，window用户可在cmd中，mac用户可在终端中输入,查看版本信息

node --version
npm --version

npm的安装分为全局安装和局部安装。

• 全局安装将安装到系统根目录中。在任何目录都可以调用插件
• 局部安装的插件只有cd到该目录下时才能被执行

三，压缩

我这边的项目目录如下

//压缩前代码目录结构如下
-------------project
|--------.idea
|--------src
||----css
||----js
|||----commonjs
||----lib
||----image
||----html
|--------target
|--------pom.xml

//压缩后代码结构如下
-------------project
|--------.idea
|--------src
||----css
||----js
|||-----commonjs
||----lib
||----image
||----html
|--------target
|--------build
||----css
||----js
|||----commonjs
||----lib
||----image
||----html
|--------package.json //使用npm init生成，上传后。进入该目录输入npm install会自动下载所有该文件列出的插件
|--------gulpfile.js  //gulp的配置命令，删除，移动，压缩，合并，替换都在该文件中配置
|--------readme.md    //自己写的，主要是对项目用到的插件的介绍，对项目命令的说明
|--------pom.xml
使用说明
1.安装node
2.在cd中进入package.json同级目录，然后输入npm install。会把所需插件全部安装到本地

gulpfile.js内容如下

var gulp = require('gulp');  
var ngAnnotate = require('gulp-ng-annotate');  //angular压缩用
var uglify = require('gulp-uglify');  //js文件压缩
var concat = require('gulp-concat');  //文件合并
var minifyCss = require('gulp-minify-css');  //CSS压缩
var rename = require('gulp-rename');  //重命名
var ngmin = require('gulp-ngmin');//angular压缩用
var stripDebug = require('gulp-strip-debug');//去掉控制器log等语句
var clean = require('gulp-clean');//删除文件
var rev = require('gulp-rev');//对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');//路径替换
var gulpSequence = require('gulp-sequence');//线程流，确保按照线性执行。[]里的异步执行
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');//压缩图片
var htmlmin = require('gulp-htmlmin');//压缩html

//copy原目录
gulp.task('copy', function() {
    //return gulp.src('src/main/webapp/**/*')
    return gulp.src([
        'src/main/webapp/**/*',
        '!'+'src/main/webapp/css/**/*',
        '!'+'src/main/webapp/js/**/*',
        '!'+'src/main/webapp/img/**/*'

    ])
        .pipe(gulp.dest('build/main/webapp'));
});

//压缩js
gulp.task('js', function() {
    return gulp.src(['./src/main/webapp/js/saas/*.js']) //注意，此处特意如此，避免顺序导致的问题
        .pipe(ngAnnotate())
        .pipe(ngmin({dynamic: false}))
        .pipe(stripDebug())  //删除log
        .pipe(uglify({outSourceMap: false})) //压缩
        //.pipe(concat('all.min.js')) //合并文件为all.min.js
        //.pipe(rename({suffix: '.min'}))
        .pipe(rev())
        .pipe(gulp.dest('build/main/webapp/js/saas/')) //生成后放到build目录下
        .pipe(rev.manifest())
        .pipe(gulp.dest('build/main/webapp/rev/js'))
});

//压缩css
gulp.task('css', function() {
    return gulp.src(['src/main/webapp/css/*.css']) //注意，此处特意如此，避免顺序导致的问题
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('build/main/webapp/css/'))
        .pipe( rev.manifest() )
        .pipe( gulp.dest('build/main/webapp/rev/css') );
});

//压缩iamge，图片没有修改文件后缀名
gulp.task('img', function() {
    return gulp.src(['src/main/webapp/img/*']) //注意，此处特意如此，避免顺序导致的问题
        .pipe(imagemin({
            optimizationLevel: 3,//类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true,//类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true,//类型：Boolean 默认：false 隔行扫描gif进行渲染
        }))
        .pipe(gulp.dest('build/main/webapp/img/'))
});

//html压缩后报错暂时不使用
gulp.task('html', function() {
    return gulp.src('src/www/index.html')
        .pipe(htmlmin({
            removeComments: true, //清除HTML注释
            collapseWhitespace: true, //压缩HTML
            //minifyJS: true, //压缩页面JS
            //minifyCSS: true //压缩页面CSS
        }))
                .pipe(gulp.dest('dist/www/'))
});

//替换文件名
gulp.task('rev', function() {
    return gulp.src(['build/main/webapp/rev/**/*.json','build/main/webapp/pica_metronic/templates/frontend/*.html'])
        .pipe(revCollector({
            replaceReved:true,
            dirReplacements:{//前面的路径会被后面的路径替换。同时前面的路径也是查找文件名的路径
                '../../../css': '../../../css/',
                '../../../js/saas': '../../../js/saas/',
                '../../../js/saas/common': '../../../js/saas/common'
            }

        }))
        .pipe(gulp.dest('build/main/webapp/pica_metronic/templates/frontend/'))
});

//配置执行顺序
gulp.task('publish',
    gulpSequence('clean','copy','js','commonJs','css','img','rev')
)

四.工具知识点

npm篇

npm -f install packagename //强制安装，不管是不是最新版本
npm update packageName //更新插件

npm install 安装插件不全 //可能是package.json问题。可以把package.json删除后，重新npm init生成

修改文件名是为了解决客户端缓存问题

gulp-clean   //这个有点坑，
             //gulp.src('build'，).pipe(clean()).会把包含在build的目录删除掉
             //gulp.src('build/**/*'，).pipe(clean()).//会报错
             //gulp.src('build/*'，).pipe(clean()).正常删除，build目录下的全部文件
             //gulp.src('build/xxx.js'，).pipe(clean()).正常删除

转载于:https://my.oschina.net/zhangyafei/blog/861120