Gulp使用

参考链接--gulp官网

安装

npm gulp --save-dev

使用

在根目录下创建gulpfile.js文件，可用插件

 var gulp = require('gulp'),
 less = require('gulp-less'),
 autoprefixer = require('gulp-autoprefixer'),
 livereload = require('gulp-livereload'),
 minifyCss = require('gulp-minify-css'),
 runSequence = require('run-sequence'),
 rev = require('abc-gulp-rev'),
 revCollector = require('abc-gulp-rev-collector');
 gulp.task('less', function () {
 //文件的目录
 gulp.src('css/.less')
 //解析less文件
 .pipe(less())
 //根据设置浏览器版本自动处理浏览器前缀
 .pipe(autoprefixer({
 browsers: [
 'Chrome >= 35',
 'Firefox >= 31',
 'Edge >= 12',
 'Explorer >= 9',
 'iOS >= 8',
 'Safari >= 8',
 'Android 2.3',
 'Android >= 4',
 'Opera >= 12'
 ]
 }))
 //压缩css代码 这行代码要在生成css文件代码之前
 .pipe(minifyCss())
 //生成的文件在css文件夹下面
 .pipe(gulp.dest('css'))
 //监听的文件发生变化的时候自动刷新
 .pipe(livereload());
 });
 //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
 gulp.task('revCss', function(){
 return gulp.src("css/.css")
 .pipe(rev())
 .pipe(rev.manifest())
 .pipe(gulp.dest('rev/css'));
 });
 
 
  //js生成文件hash编码并生成 rev-manifest.json文件名对照映射 
  gulp.task('revJs', function(){
      return gulp.src("js/*.js")
          .pipe(rev())
          .pipe(rev.manifest())
          .pipe(gulp.dest('rev/js'));
  });

  //Html替换css、js文件版本
  gulp.task('revHtml', function () {
      return gulp.src(['rev/**/*.json', 'View/**/*.html'])
          .pipe(revCollector())
          .pipe(gulp.dest('View'));
  });
  //创建监听任务 监听文件变化
  gulp.task('watch', function () {
      livereload.listen();
      gulp.watch('css/*.less', ['less']);
  });
  //开发构建
  gulp.task('build', function (done) {
        condition = false;
       runSequence(
            ['less'],
            ['revCss'],
            ['revJs'],
            ['revHtml'],
            done);
   });
  
   gulp.task('default', ['watch']);
 
 

上面代码块中，实现了自动为js，css加版本号，但是加的方式与传统的不一样，原因是代码来源于php项目中，前后端不分离，所以前端代码是在application中的，没有和gulpfile同一个文件夹下。因此也是修改下gulp-rev和gulp-rev-collector两个文件，重新上传到自己的npm空间并重命名以及版本号（参考上传npm），但是作者等均未修改。文章参考自Tony(托尼)老师的前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号。

运行

• 在根目录下，Terminal终端输入命令gulp，监听less文件的变化；
• 输入gulp build自动生成版本号，提交代码。