angular的gulp自动化解决方案

前端之家收集整理的这篇文章主要介绍了angular的gulp自动化解决方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先说一下本地开发环境。

  • 使用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')
)
@H_403_66@

四.工具知识点

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()).正常删除

猜你在找的Angularjs相关文章