Gulp 之二

Gulp學習2

以前已經配置過一篇啦， 只不過那次是針對browserify

搬運
http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

你的工程文件夾要安裝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
});