來把 Gulp 的Task寫完

撰寫前要先安裝欲使用的套件

Automating Sass/Less compilation

首先先將Sass或是Less的檔案compile為CSS

npm install gulp gulp-sass 
npm install gulp gulp-less 

這邊用Less當作例子
在gulpfile.js中加入

var less = require('gulp-less');

gulp.task('less', function() {
  
  // less的檔案路徑
  gulp.src('style/less/**.less') 
      .pipe(less())
      // 此為compile後css檔案的儲存路徑
      .pipe(gulp.dest('style/css/')) 
});

// default要執行的Task
gulp.task('default',['less']);

接著創建一個less的檔案

並且寫入一些簡單的code

@padding: 6px;

nav {
  ul {
    margin: 0;
    padding: @padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: @padding 12px;
    text-decoration: none;
  }
}

如果是Sass則將@padding改為$padding

儲存後在終端機執行gulp

gulp

就可以看到css的資料夾下多了一個編譯好的css檔案

裡面也是編譯好的內容

nav ul {
  margin: 0;
  padding: 6px;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

最後html要記得link這個編譯好的，不然沒辦法讀取less的格式喔！

Watch

Watch是監控檔案程式碼的變化，便立即執行指定的Task。

使用前一樣要先安裝套件

npm install --save-dev gulp-watch

並且在gulpfile.js加入

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

  // 監看的路徑檔案以及執行less這項task
  gulp.watch('style/less/*.less',['less']);  
});

// default要執行的Task
gulp.task('default',['watch']);

執行gulp

gulp

可以發現gulp不會停機了
稍微修改less的內容並儲存後

@padding: 6px;

nav {
  ul {
    margin: 0;
    padding: @padding;
    list-style: none;
  }    
}

gulp迅速的執行了一次'less'

main.css也被編譯完成並且儲存了

nav ul {
  margin: 0;
  padding: 6px;
  list-style: none;
}

Clean CSS

clean CSS可以壓縮css檔案的大小。

npm install gulp-clean-css

安裝完成後一樣將code加入gulpfile.js
監看css的路徑，當less被compile為css後，執行minify-css

var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function() {
  return gulp.src('style/css/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('style/minify/'));
});

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

  // 監看less的路徑以及執行將less compile的task
  gulp.watch('style/less/*.less',['less']);
  // 監看css的路徑，當less被compile為css後，
  // 執行minify-css
  gulp.watch('style/css/*.css',['minify-css']);
});

// default要執行的Task
gulp.task('default',['watch']);

修改less檔儲存後，
可以看到除了編譯好的css檔，
在minify/的資料夾下也多了一個minify後的css檔案。

nav ul{margin:0;padding:6px;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

可以看到gulp幫我們清除了換行以及不需要的空格。
html可以link這一個minify過的css檔案。