文档章节

angular的gulp自动化解决方案

筱飞
 筱飞
发布于 2017/03/17 09:55
字数 1267
阅读 83
收藏 0

先说一下本地开发环境。

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

© 著作权归作者所有

筱飞
粉丝 15
博文 145
码字总数 22847
作品 0
虹口
前端工程师
私信 提问
使用Angular cli升级AngularJS项目——(一)引导Angular混合应用

前言 都9102年了,笔者所在的公司的主要项目还是用AngularJS 1.6这种史诗的框架进行开发的。另外由于历史的原因,代码的凌乱程度早已超越想象。为此,笔者决定痛下决心把整个项目重构了一遍....

益生菌。
02/14
0
0
在 Angular 8 中,我们可以期待些什么

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前...

葡萄城技术团队
04/15
411
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
[PBlog] 使用 Java 写的用 markdown 做为写作语法的单页应用博客,已开源

预览地址: Pelin 的个人博客 源码地址:github.com/penglongli 简介 PBlog 基于 Spring Framework + Mybatis ,前端使用 Less 作为预处理样式, marked.js 来处理 markdown 格式内容,并且通...

Pelin_li
2016/05/05
208
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
9分钟前
1
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
3
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
12
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部