Gulp入门

先来看一段代码 gulp.js

var gulp = require('gulp'),
   uglify = require('gulp-uglify');
gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

gulp.src()  读取一个或一组参数并返回它们的流（文件流）

定义任务gulp.task

gulp.task('greet', function () {
   console.log('Hello world!');
});

运行gulp greet会返回一个“Hello world!”。

task也可以是一组task

gulp.task('build', ['css', 'js', 'imgs']);

定义了一个build task包含了css、js、imgs三个task。

这种写法有种缺陷，你不知道css这task结束后是否就真的去执行js这个task了。所以还是像上面greet那样一个个定义吧（囧）。

gulp可以定义默认task，把task的名字命名为default之后，你只需要运行gulp命令即可

gulp.task('default', function(){
    // Your default task
});

介绍一个有用的工具BrowserSync

BrowserSync是一个同步的调试工具，通过它你对你的界面进行的修改可以立即显示，你不需要F5了。

首先安装

npm install --save-dev browser-sync

然后在你的gulpfile.js你里面写上

var gulp = require('gulp'),
    browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
   var files = [
      'app/**/*.html',
      'app/assets/css/**/*.css',
      'app/assets/imgs/**/*.png',
      'app/assets/js/**/*.js'
   ];
   browserSync.init(files, {
      server: {
         baseDir: './app'
      }
   });
});

运行命令gulp browser-sync就可以了。

来自为知笔记(Wiz)