Gulp-前端进阶A-2

1、js压缩

注意在根目录的package.json文件里在成功安装uglify后要有 "gulp-uglify": "^1.5.4" 才行

var gulp = require('gulp'),
  gulpLoadPlugins = require('gulp-load-plugins'),   //插件使用取代多次require(......)
  plugins = gulpLoadPlugins();
var uglify=require('gulp-uglify');
gulp.task('default',function(){
  console.log('default');
});
gulp.task('utjs',['default'],function(){     //先执行任务default
  return gulp.src('src/js/*.js')
  .pipe(plugins.uglify())                      //这里plugins.****
  .pipe(gulp.dest('build'));
});

Gulp-前端进阶A-2

build目录里无文件夹时,自动匹配src文件结构生成,有文件夹时,build根生成,要想指定时,自己设置 .pipe(gulp.dest('build')); --> build/js或其他

2、gulp.src(path,{})---{base:'......'}作用

  gulp.src('src/js/*.js',{base:'src'}),在build内有目录时,加了base则不再生成在根目录,而是按照src的目录结构生成

3、异步问题

gulp.task('default',['two']);
gulp.task('two',['one'],function(){
  console.log(888+'two');
});
gulp.task('one',function(fn){
  setTimeout(function(){
    console.log(888+'one');
    fn();
  },2000);
});

  3.1 先说default,为默认任务,执行default可以直接gulp,所有任务可以无fun

  3.2 一般情况下,异步的时间到了才执行,所以还是two的先执行了,这里,无fn时,顺序为one->two->default,输出console.log(888+'two');->console.log(888+'one');

  3.3 fn:任务函数提供的回调,用来通知任务已经完成,就是one任务完成,然后才执行two,最后default,输出:

    Gulp-前端进阶A-2

4、watch:gulp.watch(glob[,opts],tasks)

  4.1

  gulp.watch('src/js/*.js',['three']);

  gulp.task('three',function(){
    console.log('three');

    //此处可以放页面刷新或者js压缩
  });

  改变js文件时变化:

  Gulp-前端进阶A-2

  4.2

  var watcher=gulp.watch('src/js/b.js',['four']);

  watcher.on('change',function(e){
    console.log('change');
    console.log(e.type+'、'+e.path);
  });
  gulp.task('four',function(){
    console.log('112');
  });

  //gulp four

  Gulp-前端进阶A-2

  watch从上向下执行,监听change先执行,输出的是类型和路径

5、rename/放在压缩后,x.min.js

  ....pipe(plugins.uglify()).pipe(plugins.rename())....

  更多: https://www.npmjs.com/package/gulp-rename

6、minify-css

gulp.task('mincss',function(){
return gulp.src('src/less/*.css',{base:'src'})
.pipe(plugins.minifyCss())
.pipe(gulp.dest('build'));
});

有无return好像没区别,base还是要写上的,这边跟空时,没有按照src目录结构生成

Gulp-前端进阶A-2

7、minify-html

 gulp.task('minhtml',function(){
return gulp.src('src/html/**/*.html',{base:'src'})
.pipe(plugins.minifyHtml())
.pipe(gulp.dest('build'));
});

要先安装npm install --save-dev gulp-minify-html,之前的也一样

8、concat

 gulp.task('concat',function(){
gulp.src('src/js/**/*.js',{base:'src'})
.pipe(plugins.uglify())
.pipe(plugins.concat('ab.js'))
.pipe(gulp.dest('build'));
});

concat('x.js') ---> x为未存在的js时,合并并生成x.js,x为存在的js时候,合并到x.js里面在build里生成,合并顺序好像是按js文件名字母顺便合并的

9、less/sass

 gulp.task('less',function(){
gulp.src('src/less/*.less')
.pipe(plugins.less())
.pipe(gulp.dest('build/css'))
});

类似的,装sass时有点插曲,先放着

LAST:宗旨------一个gulp命令,所有代码自动压缩、转化、合并......管理so easy

上一篇:C#给PDF文档添加文本和图片页眉


下一篇:[转]Delphi 中 image 控件加载bmp、JPG、GIF、PNG等图片的办法