前端從零單排之Gulp(第二期)

gulp 是個相似於grunt的前端工做流工具，今天就簡單的介紹一下gulp和一些個人使用感覺

Installing gulp

在Terminal中安裝全局gulp

npm install -g gulp

切換到你的前端工做目錄下

npm install gulp --save-dev

Tips: 確保你的前端工做目錄下有package.json這個文件

而後gulp就已經安裝好了，立刻就能夠進入簡單的配置了。

Simple

// Include gulp
var gulp = require('gulp');

// Include plugins
var less = require('less');

// Register task
gulp.task('less', function(){
  gulp.src('src/less/*.less')
      .pipe(less())
      .pipe('dest/css/main.css');
})
// Task default
gulp.task('default', function(){
    gulp.run('less');
})

以上便是gulp的簡單例子了，相比於grunt的配置，只能說真心簡單了好幾個數量級。

Install gulp plugins

• Less compile (gulp-less)
• Autoprefixer (gulp-autoprefixer)
• Minify CSS (gulp-minify-css)
• JSHint (gulp-jshint)
• Concatenation (gulp-concat)
• Uglify (gulp-uglify)
• Compress images (gulp-imagemin)
• LiveReload (gulp-livereload)
• Clean files for a clean build (gulp-clean)
• Caching of images so only changed images are compressed (gulp-cache)
• Notify of changes (gulp-notify)

Tips: 每一個gulp plugin 使用方法可在https://www.npmjs.org/package/gulp-，即爲你要插件，如 https://www.npmjs.org/package/gulp-less 就是gulp-less的使用方法

gulp零零碎碎介紹的就這些了，想了解如何使用coffee配置gulp文件，以及比較複雜gulp流配置的能夠參考下面參考文章中的gulpjs 配置文件。

使用心得：使用gulp近10來天的時間，感受相對於grunt來講gulp的任務配置這塊徹底完勝，並且如今gulp目前的插件也徹底能知足工做的需求。可是在使用gulp的工做之中會遇到一些問題。首先gulp是基於stream工做的，一旦出錯就須要人肉從新啓動。

以上即全文，但願對你們能有幫助。

參考文章

• gulpjs 中文簡介
• gulpjs 配置文件
• getting started with gulpjs
• gulpjs API
• gulpjs plugins list