前端構建工具之gulp_經常使用插件

gulp經常使用插件的使用

今天來看看一下gulp的經常使用插件的使用

就像gruntjs須要一個Gruntfile.js文件同樣，gulp也須要一個文件做爲它的主文件，在gulp中這個文件叫作gulpfile.js。

在項目根目錄下新建文件gulpfile.js文件

目錄結構

├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json

gulp API介紹

詳情查看官方文檔
. gulp.task() 用來定義任務
. gulp.src() 須要處理的源文件路徑
. gulp.dest() 處理後的發佈路徑
. gulp.watch() 用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務，例如文件壓縮等。

用例

gulp.src(globs[, options])

gulp.src(['js/*.js','css/*.css','*.html'])//使用數組的方式來匹配多種文件
gulp.src([*.js,'!b*.js']) //匹配全部js文件，但排除掉以b開頭的js文件

gulp.dest(path[,options])

gulp.src('script/avalon/avalon.js') //沒有通配符出現的狀況
    .pipe(gulp.dest('dist')); //最後生成的文件路徑爲 dist/avalon.js

//有通配符開始出現的那部分路徑爲 **/underscore.js
gulp.src('script/**/underscore.js')
    //假設匹配到的文件爲script/util/underscore.js
    .pipe(gulp.dest('dist')); //則最後生成的文件路徑爲 dist/util/underscore.js

gulp.src('script/*') //有通配符出現的那部分路徑爲 *
    //假設匹配到的文件爲script/zepto.js    
    .pipe(gulp.dest('dist')); //則最後生成的文件路徑爲 dist/zepto.js

gulp.src(script/lib/*.js) //沒有配置base參數，此時默認的base路徑爲script/lib
    //假設匹配到的文件爲script/lib/jquery.js
    .pipe(gulp.dest('build')) //生成的文件路徑爲 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base參數，此時base路徑爲script
    //假設匹配到的文件爲script/lib/jquery.js
    .pipe(gulp.dest('build')) //此時生成的文件路徑爲 build/lib/jquery.js

gulp.task(name[, deps], fn)

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定義一個有依賴的任務
  // Do something
});

//只要執行default任務，就至關於把one,two,three這三個任務執行了
gulp.task('default',['one','two','three']);

gulp.task(glob[, opts], tasks)

gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //變化類型 added爲新增,deleted爲刪除，changed爲改變 
    console.log(event.path); //變化的文件的路徑
});

參考文章前端構建工具gulpjs的使用介紹及技巧

gulp經常使用插件

. 編譯stylus (gulp-stylus)
. 壓縮css (gulp-minify-css)
. 壓縮js (gulp-uglify)
. 壓縮圖片 (gulp-imagemin)
. js檢查 (gulp-jshint)
. 文件合併 (gulp-concat)
. 自動刷新 (gulp-livereload) 須要安裝谷歌插件LiveReload(2.0.9)
. 文件清理 (gulp-clean)
. 變更監聽 (gulp-cache) 只有文件變化了纔再次觸發任務
. 變更通知 (gulp-notify)
. 文件重命名 (gulp-rename)

gulp的全部插件相關能夠在npm官網查詢

執行命令安裝插件

這裏若是出錯，或者好久不響應，能夠單個單個安裝

npm install gulp-stylus gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

引用插件

var gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

建立任務

處理css

gulp.task('styles', function() {  
  return gulp.src('src/styles/main.styl')
    .pipe(stylus({ style: 'expanded' }))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

說明：

處理js

gulp.task('scripts', function() {  
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

說明：

處理圖片

gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

說明：

清理

gulp.task('clean', function() {
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
    .pipe(clean());
});

說明：

設置默認任務

gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

說明：

監聽

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

  // 監聽全部.styl
  gulp.watch('src/styles/**/*.styl', ['styles']);

  // 監聽全部.js
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // 監聽全部圖片
  gulp.watch('src/images/**/*', ['images']);

  // 創建即時刷新頁面
  var server = livereload();

  // 監聽全部在 dist/  目錄下的文件，一旦有更動，便進行刷新
  gulp.watch(['dist/**']).on('change', function(file) {
    server.changed(file.path);
  });

});

說明：

完整文件

// 載入外掛
var gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

// 樣式
gulp.task('styles', function() {
  return gulp.src('src/styles/main.styl')
    .pipe(stylus({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

// 腳本
gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

// 圖片
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

// 清理
gulp.task('clean', function() {
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
    .pipe(clean());
});

// 預設任務
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

// 文件變更監聽
gulp.task('watch', function() {

  // 監聽全部.styl
  gulp.watch('src/styles/**/*.styl', ['styles']);

  // 監聽全部.js
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // 監聽全部圖片
  gulp.watch('src/images/**/*', ['images']);

  // 創建即時刷新頁面
  var server = livereload();

  // 監聽全部在 dist/  目錄下的文件，一旦有更動，便進行刷新
  gulp.watch(['dist/**']).on('change', function(file) {
    server.changed(file.path);
  });

});

項目DEMO待續...