gulp 压缩css js后替换路径,gulp, js压缩, css压缩, jsp文本替换, 文本拷贝, bower， gulp | 墨荷琼林官网-连载教程...

随着时代的发展，越来越多的技术蜂拥出来，而web技术也从之前单一的单一打包，放到web容器中运行。逐渐发展成了，js压缩，sass编译成css然后在压缩，sourceMap的引入，CDN的引入等等。这篇文章就是一个大一统的解决方案。不卖关子了，下面介绍一下本篇文章的目的。

本篇文章用一个spring boot实现如下功能：

使用spring boot + 内嵌tomcal + jsp 实现web容器

前端使用 angular js + sass + bower + npm + gulp 做前端开发

前端 sass 编译 + css 压缩 + sourcemap + 版本 + CDN

前端 JS 格式化校验 + JS 压缩 + 版本 + CDN

项目路径如下 spring boot CDN 项目。 项目截图如下

整个项目所以来的所有js被压缩成了两个一个是 lib-all.js(自己写js)(所有外部引入的js如angularjs, jquery等) 和 app-all.js分别用gulp给每一个js加上了版本。项目所有css被压缩成了两个，一个是 app-all.css 和 external-all.css也被打上版本，加上CDN路径。

开始正戏： 介绍如何实现

搭建spring boot 工程

pom 文件

项目路径已经列出来了，具体pom可以见github，这里只是把重点的pom内容列出来

首先定义pom的打包方式为 war

0.0.1-SNAPSHOT

war

spring-gulp-rev-cd

Demo project for Spring Boot

然后引入 web项目基本依赖

org.springframework.boot

spring-boot-starter-web

javax.servlet

jstl

org.apache.tomcat.embed

tomcat-embed-jasper

provided

引入编译war包的编译的核心插件

项目路径如下 spring boot CDN 项目

这里mainclass如果不指定，那么 mvn package的 war包无法直接运行。 不加repackage也可以，但是这时候你在打包的时候要用 mvn clean package spring-boot:repackage -Pprod

org.springframework.boot

spring-boot-maven-plugin

true

com.springgulprevcdn.SpringGulpRevCdnApplication

repackage

org.apache.maven.plugins

maven-compiler-plugin

核心插件maven-war-plugin

项目路径如下 spring boot CDN 项目

这个非常重要，有这个依赖，我们可以先用mvn运行gulp进行js css编译压缩和 版本+ CDN替换然后在调用war打包工具打包。做到偷梁换柱的作用。其中 prepare-package 类似于一个标记，会在 gulp编译的的时候用到，请继续下面篇文章，就会找到解答。

org.apache.maven.plugins

maven-war-plugin

2.3

prepare-package

exploded

${project.build.directory}/${project.build.finalName}

false

true

/configuration>

添加gulp到 mvn中

项目路径如下 spring boot CDN 项目

prepare-package这个就是上面讲到的端点， 有了这个断点，mvn在打包的时候会先 执行gulp然后接着断点继续打war包

prod

com.github.eirslett

frontend-maven-plugin

1.3

install node and npm

install-node-and-npm

v6.6.0

3.10.3

npm install

npm

install

run gulp

prepare-package

gulp

cdnify

gulp 分析

编译 sass --> css --> 文件合并 --> css文件压缩

gulp.task('convert-compress-sass', function(){

return gulp.src('src/main/webapp/sass/*.scss')

.pipe(sourceMap.init())

.pipe(sass())

.pipe(sourceMap.write('./'))

.pipe(gulp.dest('src/main/webapp/app/styles/'));

});

js --> 合并 --> 格式校验

gulp.task('scripts', function () {

return gulp.src('app/**/*.js', {cwd: 'src/main/webapp/'})

.pipe(jshint())

.pipe(jshint.reporter(stylish));

});

copy 字体

项目路径如下 spring boot CDN 项目

因为css 路径待会会加上CDN路径，因此CSS依赖的font路径也会变成CDN的路径，因此这时候需要把font单独拷贝出来。

gulp.task('copy-fonts', function (){

return gulp.src(['src/main/webapp/bower_components/bootstrap/dist/fonts/*.{ttf,woff,woff2,eot,svg}'])

// .pipe(flatten())

.pipe(gulp.dest('target/spring-gulp-rev-cdn/static/fonts/'));

});

压缩jsp中的css和js

项目路径如下 spring boot CDN 项目

其中的 cssLibIndex cssAppIndex jsLibIndex appJs都是index.jsp中的

gulp.task('usemin', ['copy-fonts', 'scripts', 'convert-compress-sass'], function () {

return gulp.src('**/*.jsp', {cwd: 'src/main/webapp/'})

.pipe(useMin({

cssLibIndex: [minifyCss({processImport: false})],

cssAppIndex: [minifyCss()],

jsLibIndex: [ngMin(), ugLify()],

appJs: [ngMin(), ugLify().on('error', gulpUtil.log)]

}))

.pipe(gulp.dest('target/spring-gulp-rev-cdn/'));

});

打versin + 添加CDN路径

gulp.task('cdnify', ['usemin'], function (){

var cssFilter = filter('**/*-all.css', {restore: true});

var jsFilter = filter('**/*-all.js', {restore: true});

return gulp.src(['target/spring-gulp-rev-cdn/static/js/*.js', 'target/spring-gulp-rev-cdn/static/styles/*.css', 'target/spring-gulp-rev-cdn/app/index.jsp'])

.pipe(jsFilter)

.pipe(rev())

.pipe(jsFilter.restore)

.pipe(gulp.dest('target/spring-gulp-rev-cdn/static/js/'))

.pipe(cssFilter)

.pipe(rev())

.pipe(cssFilter.restore)

.pipe(gulp.dest('target/spring-gulp-rev-cdn/static/styles/'))

.pipe(revReplace({replaceInExtensions: ['.jsp']}))

.pipe(cdnizer({

defaultCDNBase: CDN ,

relativeRoot: '/',

files: [

// {

// //ignore this file, otherwise it tries to map this to our cdn, which breaks the url

// file: 'http://g.alicdn.com/ilw/ding/0.8.6/scripts/dingtalk.js',

// cdn: 'http://g.alicdn.com/ilw/ding/0.8.6/scripts/dingtalk.js'

// },

'**/*-all-*.css',

'**/lib-all-*.js',

'**/app-all-*.js'

]}

))

.pipe(gulp.dest("target/spring-gulp-rev-cdn/app/"));

});

到这里项目基本上结束了。

运行项目

mvn clean package spring-boot:repackage -Pprod

java -jar target/spring-gulp-rev-cdn.war