Gulp 之二

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
     }))

OR

    .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
});