gulp使用

      解决思路：Maven + gulp + frontend-maven-plugin

• 在项目根目录下添加：gulpfile.js、package.json

 gulpfile.js

  

var gulp = require('gulp'),  //基础
    runSequence = require('run-sequence'), //顺序
    cssver = require('gulp-make-css-url-version'), //
    cssmin = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),//js检查
    uglify = require('gulp-uglify'), //js压缩
    concat = require('gulp-concat'),//npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 文件合并
    clean = require('gulp-clean'),//清空文件夹
    rename = require('gulp-rename'),//更改文件名
    rev = require('gulp-rev'),//更改版本名
    filter = require('gulp-filter'),//文件过滤
    zip = require('gulp-zip'), //zip插件
    revCollector = require('gulp-rev-collector');//gulp-rev的插件 ，用于html模板更改引用路径


var project = 'template';//项目编译后的项目名
var path = {
    target : 'target',
    base : 'target/' + project,
    resources : 'target/' + project + '/resources',
    css: 'target/' + project + '/resources/temp1/css',
    js: 'target/' + project + '/resources//temp1/js',
    jsp: 'target/' + project + '/WEB-INF/view',
    static_build_path: 'target/build'
};

/**
 * 清空
 */
gulp.task('clean', function () {
    return gulp.src([path.static_build_path], {read: false}).pipe(clean());
});

/**
 * 压缩css
 */
gulp.task('cssmin', function () {
    return gulp.src(path.css + '/**/*.css')
        .pipe(cssver())
        .pipe(cssmin({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(rename(function (path) {
            //path.basename += ".min";
            path.extname = ".css";
        }))
        .pipe(rev())
        .pipe(gulp.dest(path.static_build_path + "/resources/css"))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.static_build_path + "/rev/css"))
        ;
});


/** 检查js */
gulp.task('lint', function () {
    return gulp.src(
        [
            path.js + '/**/*.js'
        ]
    )
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
});


/** 压缩js文件 */
gulp.task('js', function () {
    const f = filter([path.js + '/**/*.js'
            , '!' + path.js + '/commons/plus/**/*.js'],
        {restore: true});
    return gulp.src(
        [
            path.js + '/**/*',
        ]
    )
        .pipe(f)
        .pipe(uglify())
        .pipe(rev())
        .pipe(f.restore)
        .pipe(gulp.dest(path.static_build_path + "/resources/js"))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.static_build_path + "/rev/js"));
});


/**
 * 静态文件替换
 */
gulp.task('rev', function () {
    return gulp.src(
        [path.static_build_path + '/rev/**/*.json',
            path.base + '/**/*.jsp'])
        .pipe(revCollector({
            replaceReved: true,
            dirReplacements: {
                '/css': '/css',
                '/js': '/js'
            }
        }))
        .pipe(gulp.dest(path.base));
});

/**
 * 删除原始文件
 */
gulp.task('del', function () {
    return gulp.src([path.js, path.css], {read: false}).pipe(clean());
});


/**
 * 复制打包后文件
 */
gulp.task('copy',  function() {
    return gulp.src(path.static_build_path + '/resources/**/*')
        .pipe(gulp.dest(path.resources));
});

/**
 * 重新压缩war包
 * */
gulp.task('zip', function() {
    return gulp.src(path.base + '/**/*.*')
        .pipe(zip('ROOT.war'))
        .pipe(gulp.dest(path.target));
});

gulp.task('default', function () {
    console.log("start...")
    runSequence(
        ['clean'],
        ['cssmin'],
        ['js'],
        ['rev'],
        ['del'],
        ['copy'],
        ['zip']
    )
});

•  package.json

 

{
  "name": "template",
  "version": "1.0.0",
  "description": "template",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.0.4",
    "gulp-concat": "^2.6.0",
    "gulp-csso": "^1.1.0",
    "gulp-filter": "^4.0.0",
    "gulp-jshint": "^2.0.0",
    "gulp-make-css-url-version": "^0.0.13",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.0.0",
    "gulp-rev-collector": "^1.0.3",
    "gulp-uglify": "^1.5.3",
    "gulp-zip": "^4.0.0",
    "jshint": "^2.9.1",
    "run-sequence": "^1.1.5"
  },
  "devDependencies": {
    "arr-flatten": "^1.0.3",
    "array-differ": "^1.0.0",
    "array-uniq": "^1.0.3",
    "beeper": "^1.1.1",
    "expand-range": "^2.0.0",
    "dateformat": "^2.0.0",
    "expand-tilde": "^2.0.2",
    "extend-shallow": "^2.0.1",
    "has-gulplog": "^0.1.0",
    "lodash": "^3.0.0",
    "lodash._reescape": "^3.0.0",
    "lodash._reevaluate": "^3.0.0",
    "lodash._reinterpolate": "^3.0.0",
    "lodash.template": "^4.4.0",
    "lodash.assignwith": "^4.2.0",
    "multipipe": "^0.1.2",
    "object-assign": "^3.0.0",
    "parse-filepath": "^1.0.1",
    "replace-ext": "^0.0.1",
    "repeat-element": "^1.1.2",
    "through2": "^2.0.0",
    "vinyl": "^0.5.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "rainwen",
  "license": "ISC"
}

•  在pom.xml文件中添加plugin(frontend-maven-plugin)

<!-- maven gulp插件 -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.4</version>
                <executions>
                    <execution>
                        <id>install-node</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>install-tern</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                    </execution>
                </executions>
                <!-- For reasons unknown, configuration for all executions must be placed at the plugin level!!! -->
                <configuration>
                    <nodeVersion>v4.4.2</nodeVersion>
                    <npmVersion>2.15.0</npmVersion>
                    <!--<installDirectory>target</installDirectory>-->
                    <!--<arguments>install tern</arguments>-->
                    <!--<workingDirectory>target/node</workingDirectory>-->
                </configuration>
            </plugin>

 

• pom.xml添加gulp支持后：

     

然后点击：frontend:install-node-and-npm安装node执行环境

frontend:install-node-and-npm

在项目cmd下（Teriminal）：npm install --save-dev gulp

 

• 执行打包命令：clean package -Dmaven.test.skip=true frontend:gulp

   到此恭喜你完成了项目的gulp打包，css,js都加上了动态名称