Gulp学习2

之前已经配置过一篇啦，只不过那次是针对browserify

搬运

http://markpop.github.io/2014/09/17/Gulp入门教程/

你的工程文件夹要安装Gulp

你需要有package.json 不能是空文件哦至少得有个{}才行,要不然npm不知道如何填写依赖，--save-dev会报错的

$ npm install gulp --save-dev

国内环境要用cnpm哟！

需要哪些插件呢

sass的编译（gulp-ruby-sass）
自动添加css前缀（gulp-autoprefixer）
压缩css（gulp-minify-css）
js代码校验（gulp-jshint）
合并js文件（gulp-concat）
压缩js代码（gulp-uglify）
压缩图片（gulp-imagemin）
自动刷新页面（gulp-livereload）
图片缓存，只有图片替换了才压缩（gulp-cache）
更改提醒（gulp-notify）
清除文件（del）

可以一口气安装他们

cnpm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

gulp-notify

gulp plugin to send messages based on Vinyl Files or Errors to Mac OS X, Linux or Windows using the node-notifier module. Fallbacks to Growl or simply logging

del

Delete files/folders using globs

rimraf

The UNIX command rm -rf for node

gulp-cache

原博这么说的

Grunt的imagemin插件就利用了缓存来避免重复压缩，而Gulp要利用gulp-cache来完成，当然啦，不仅限定于缓存图片。

比如之前build的时候已经压缩了img中的图片后来又添加了一张有了cache就可以避免重复压缩已经有的三张

gulp-autoprefixer

Autoprefixer的每个版本都包含一份最新的 Can I Use 数据

Autoprefixer默认将支持主流浏览器最近2个版本

主流浏览器最近2个版本用“last 2 versions”；

全球统计有超过1%的使用率使用“>1%”;

大于某个版本用“ff>20”或"ff>=20".

    .pipe(autoprefixer({

        browsers: ['last 2 versions'],

            cascade: false

     }))

    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))

目录结构

-src

--styles

-dist

--assets

---css

运行&&更新

注册一个任务

gulp.task('styles', function() {....});

假如你只想运行这一个task gulp styles

那么如何一口气运行多个任务呢

gulp.task('default', ['watch', 'scripts', 'images']);

自动更新是最重要的，免得我再敲命令嘛

// Rerun the task when a file changes

gulp.task('watch', function() {

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

});

gulp.task('default', ['watch','styles']);

显然这里是针对文件改变后重新编译页面并没有刷新

样式

sass的编译使用 gulp-ruby-sass

不用gulp-sass的原因是这个太大了下载安装要很久而且容易安装失败（它还依赖node-sass）

原博可能因为时间早的缘故，其写法目前是不能跑通的

gulp-ruby-sass Offcial Site

var gulp = require('gulp');

var sass = require('gulp-ruby-sass');

gulp.task('sass', function () {

  return sass('source/file.scss')

    .on('error', sass.logError)

    .pipe(gulp.dest('result'));

});

其它

//image

gulp.task('images', function() {

  return gulp.src('src/styles/imgs/*')

    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))

    .pipe(gulp.dest('dist/css/img'))

    .pipe(notify({ message: 'Images task complete' }));

});

gulp.task('scripts', function() {

    gulp.src('src/scripts/lib/*.js')

    .pipe(concat('lib.js'))

    .pipe(gulp.dest('dist/js/lib'));

  // Minify and copy all JavaScript (except vendor scripts)

  // with sourcemaps all the way down

  return gulp.src('src/scripts/*.js')

        .pipe(sourcemaps.init())

        .pipe(jshint('.jshintrc'))

        .pipe(jshint.reporter('default'))

        .pipe(uglify())

        .pipe(concat('all.min.js'))

        .pipe(sourcemaps.write())

        .pipe(gulp.dest('dist/js'))

        .pipe(notify({ message: 'Scripts task complete' }));

});

reload

原博用的是gulp-livereload 但是我没有懂他是如何用这个livereload的

没看到原博是如何关联自己的服务器和 gulp-livereload

可能是因为原博需要安装一个Chrome插件所以不再代码中关联这个解决办法并不好

用gulp-connect可以帮助我们自动刷新

gulp-connect Official Site

实际上它是 connect 和 gulp-livereload 的再封装

我们需要建立一个服务器

gulp.task('connectDist', function () {

  connect.server({

    root: 'dist',

    port: 8001,

    livereload: true

  });

});

然后如果文件改变了就让当前服务器刷新

gulp.task('styles', function() {

  return rsass('src/styles/main.scss')

    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))

    .pipe(gulp.dest('dist/css'))

    .pipe(rename({suffix: '.min'}))

    .pipe(minifycss())

    .pipe(gulp.dest('dist/css'))

    .pipe(connect.reload())

    .pipe(notify({ message: 'Styles task complete' }));

});

当然了你的默认任务里面要加上服务器这一个

gulp.task('default', ['connectDist','styles','images','scripts','html','watch']);

browser-sync

和gulp-connect差不多的方式

gulp.task('watch', function() {

    browserSync.init({

        server: {

            baseDir: "./dist"

        }

    });

    gulp.watch('sass/demo.scss', ['styles']).on('change', browserSync.reload);

    gulp.watch('src/styles/*.scss', ['styles']).on('change', browserSync.reload);

    gulp.watch('src/scripts/*.js', ['scripts']).on('change', browserSync.reload);

    gulp.watch('src/styles/imgs/*', ['images']).on('change', browserSync.reload);

    gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);

});

//使用 gulp-ruby-sass

gulp.task('styles', function() {

    rsass('src/styles/main.scss', { sourcemap: true })

    .on('error', sass.logError)

    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))

    .pipe(minifycss())

    // For inline sourcemaps

    .pipe(sourcemaps.write())

    // For file sourcemaps

    .pipe(sourcemaps.write('maps', {

      includeContent: false,

      sourceRoot: 'src/styles'

    }))

    .pipe(gulp.dest('dist/css/'))

    .pipe(reload({stream: true}))

    .pipe(notify({ message: 'Styles task complete' }));

});

Gulp的任务重一定要有return吗

http://stackoverflow.com/questions/21699146/gulp-js-task-return-on-src

https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support

return 用在存在依赖的task中

默认情况下Gulp同时并行运行所有任务但是有些任务是依赖前面任务运行结果的

所以用return

gulp.task('two', ['one'], function() {

    // task 'one' is done now

});

巴特西

Gulp 之二