gulp建立任務模闆（less/壓縮/合并/最小化圖檔）

操作流程

• 首先通過 gulp.src() 方法擷取到想要處理的檔案流
• 然後把檔案流通過 pipe 方法導入到 gulp 的插件中
• 最後把經過插件處理後的流再通過pipe方法導入到 gulp.dest() 方法中
• gulp.dest() 方法則把流中的内容寫入到檔案中

**package.json**
{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.11.1",
    "gulp": "^3.9.0",
    "gulp-cssnano": "^2.1.0",
    "gulp-less": "^3.0.5"
  }
}
           

**gulpfile.js**

'use strict';

// 此處代碼都是由NODE執行
// 載入Gulp子產品
var gulp = require('gulp');
var less = require('gulp-less');

// 注冊一個任務
gulp.task('copy', function() {
  // 當gulp執行這個say任務時會自動執行該函數
  // console.log('hello world');
  // 合并 壓縮之類的操作
  // 複制檔案
  // gulo.src取一個檔案
  gulp.src('src/index.html')
    .pipe(gulp.dest('dist/')); // 将此處需要的操作傳遞進去
});


gulp.task('dist', function() {
  // src/index.html
  gulp.watch('src/index.html', ['copy']);
  gulp.watch('src/styles/*.less', ['style']);
});

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

gulp.task('style', function() {
  gulp.src('src/styles/*.less')
    .pipe(less()) // 該環節過後就是CSS
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css/'));
});

var browserSync = require('browser-sync').create();

// Static server
gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});
           

常用插件

• 編譯 Less：gulp-less
• 建立本地伺服器：gulp-connect
• 合并檔案：gulp-concat
• 最小化 js 檔案：gulp-uglify
• 重命名檔案：gulp-rename
• 最小化 css 檔案：gulp-minify-css
• 壓縮html檔案 gulp-minify-html
• 最小化圖像：gulp-imagemin