你的位置:首页 > Java教程

[Java教程]Gulp实战(二)


一.配置环境

1.基于NodeJs安装Git,npm,gulp

2.安装各类插件

3.参考文档

  • http://www.tuicool.com/articles/UbaqyyJ
  • http://www.tuicool.com/articles/QzaqAbF
  • http://www.gulpjs.com.cn/docs/api/
  • https://segmentfault.com/a/1190000002932998

 

二.测试项目结构

image

三.配置文件代码

var gulp = require('gulp'),  del = require('del'), //删除文件/文件夹  gulpif = require('gulp-if'),  gulpSequence = require('gulp-sequence'), //gulp顺序执行任务插件  imagemin = require('gulp-imagemin'), //压缩图片文件(包括PNG、JPEG、GIF和SVG图片)  cache = require('gulp-cache'), //gulp的缓存代理  concat = require('gulp-concat'); //多个文件合并成一个var nano = require('gulp-cssnano'), ////删除空白和注释,并且压缩代码  postcss = require("gulp-postcss"), //css预编译器  sprites = require('postcss-sprites').default, //CSS精灵  autoprefixer = require('autoprefixer'), //自动补全浏览器兼容性前缀  cssgrace = require('cssgrace'); //CSS后处理工具,hackIEvar uglify = require('gulp-uglify'); //通过UglifyJS来压缩JS文件var rev = require('gulp-rev'), //对文件名加MD5后缀  revCollector = require('gulp-rev-collector'); //这个插件就是从manifests中获取静态资源版本数据, 该数据由不同的流产生, 并且替换html中的链接.var minifyHtml = require('gulp-minify-html'); //压缩HTML文件var usemin = require('gulp-usemin'), //用来将HTML 文件中(或者templates/views)中没有优化的script 和stylesheets 替换为优化过的版本  livereload = require('gulp-livereload'),  notify = require('gulp-notify');var SRC_DIR = './src/';var DST_DIR = './dist/';var condition = true;gulp.task('clean', function() {  return del(['dist']);});/** * 压缩图片 */gulp.task('min-img', function() {  gulp.src(SRC_DIR + '/img/*.{png,jpg,gif,ico}')    .pipe(cache(imagemin({ //从缓存中读取,OK,只针对修改后的图片       optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)      progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片      interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染      multipass: true, //类型:Boolean 默认:false 多次优化svg直到完全优化      svgoPlugins: [{ removeViewBox: false }], //不要移除svg的viewbox属性      progressive: true    })))    .pipe(gulp.dest(DST_DIR + '/img')); //输出目录});/** * 压缩CSS */gulp.task("min-css-pc", function() {  // PostCSS  var processors = [    sprites({      'stylesheetPath': SRC_DIR + '/css/',      'spritePath': DST_DIR + '/img/'    }),    autoprefixer({      browsers: ['> 1%', 'last 2 versions', 'ie 6-11']    }),    cssgrace  ];  return gulp.src([SRC_DIR + '/css/**/*.css'])    .pipe(nano({      discardComments: {        removeAll: true      }    }))    .pipe(postcss(processors))    .pipe(gulp.dest(DST_DIR + '/css/'));});/** * 压缩JS */gulp.task('min-js', function() {  return gulp.src(SRC_DIR + '/js/**/*.js')    .pipe(uglify())    .pipe(gulp.dest(DST_DIR + '/js/'));});/* * 压缩并版本化JS */gulp.task('rev-min-js', function() {  return gulp.src(SRC_DIR + '/js/**/*')    .pipe(concat('all.min.js'))    .pipe(uglify())    .pipe(rev())    .pipe(gulp.dest(DST_DIR + '/js/'))    .pipe(rev.manifest())    .pipe(gulp.dest(DST_DIR + '/rev/js'));});/** * 压缩版本化CSS */gulp.task("rev-min-css", function() {  // PostCSS  var processors = [    sprites({      'stylesheetPath': SRC_DIR + '/css/',      'spritePath': DST_DIR + '/img/'    }),    autoprefixer({      browsers: ['> 1%', 'last 2 versions', 'ie 6-11']    }),    cssgrace  ];  return gulp.src([SRC_DIR + '/css/**/*.css'])    .pipe(concat('all.min.css')) //合并后的文件    .pipe(nano({      discardComments: {        removeAll: true      }    }))    .pipe(rev()) //版本化    .pipe(postcss(processors)) //雪碧图生成,浏览器前缀自动补齐,IE hacker    .pipe(gulp.dest(DST_DIR + '/css/'))    .pipe(rev.manifest())    .pipe(gulp.dest(DST_DIR + '/rev/css'));});/** * 压缩HTML引入版本号文件 */gulp.task('rev-min-html', function() {  return gulp.src([DST_DIR + '/rev/**/*.json', SRC_DIR + '/view/**/*.html'])    .pipe(revCollector())    .pipe(gulpif(      condition, minifyHtml({        empty: true,        spare: true,        quotes: true      })    ))    .pipe(gulp.dest(DST_DIR + '/view'));});/* * PC打包方案 */gulp.task('pc', gulpSequence(  'clean', 'min-img', 'rev-min-css', 'rev-min-js', 'rev-min-html'));gulp.task('default', ['pc'], function() {  // return del(['tmp/']);});

四.效果

  • cmd运行命令gulp

image

 

imageimage

imageimage