gulp

什麼是gulp

任務自動化管理工具

Gulp 是基於 Node.js 的任務自動化管理工具，和 Grunt 同樣都是用來簡化人工的步驟

Gulp 使用了 streams ( 流 ) 的概念，一個任務一個任務的依序按照流程做完，相當的容易思考和理解

安裝

npm install

透過cmd(指令碼)安裝

$ npm install gulp -g

這會將 gulp 安裝到全域環境下，讓你可以存取 gulp 的 CLI

透過

gulp -v

可以檢查版本號

建立Prjoect

$ mkdir TestGulp
$ cd TestGulp
$ npm init

package.json

{
  "name": "test_gulp",
  "version": "1.0.0",
  "description": "test gulp",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

建立gulp

npm install gulp --save-dev

上述指令將 gulp 安裝到本地端的專案內，並紀錄於 package.json 內的devDependencies 屬性。

安裝 gulp 外掛

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

npm install gulp-webserver -save-dev
  • 編譯 Sass（gulp-ruby-sass）
  • Autoprefixer（gulp-autoprefixer）
  • 縮小化（minify）CSS（gulp-cssnano）
  • JSHint（gulp-jshint）
  • 串接（gulp-concat）
  • 醜化（Uglify）（gulp-uglify）
  • 壓縮圖檔（gulp-imagemin）
  • 即時重整（LiveReload）（gulp-livereload）
  • 快取圖片，只有變更的圖檔才會壓縮處理（gulp-cache）
  • 通知更動（gulp-notify）
  • 清除檔案，有個乾淨的建構環境（del）
  • 網頁(gulp-webserver)

指令將會安裝必要的外掛，並紀錄於 package.json 內的 devDependencies 屬性。

建立gulpfile.js載入外掛

建立一個 gulpfile.js 檔案，並且載入這些外掛

var gulp = require('gulp'),  
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

gulp.task

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

gulp.task API 用來建立任務。可以透過終端機輸入 $ gulp styles 指令來執行上述任務。

下圍針對style的處理

gulp.task('styles', function() {  
  return sass('src/styles/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

創建gulp-ruby-sass API

例如

return sass('src/styles/main.scss', { style: 'expanded' })

定義了來源檔案，並且帶入任意選項。

也可以使用gulp.src API

pipe

.pipe(autoprefixer('last 2 version'))

使用 pipe() 來串流來源檔案到另個外掛。

外掛的選項通常在它們各自的 Github 頁面中找到。

串流是可串鏈的，所以你可以串流各式各樣的外掛在上面。

gulp.dest

.pipe(gulp.dest('dist/assets/css'));

gulp.dest() API 是用來設定目的路徑。

del

清除目的地目錄並重建檔案

 gulp.task('clean', function() {  
    return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']);
});

gulp.start

建立一個預設任務，當只輸入 $ gulp 指令時執行的任務

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

gulp.watch

監控運行狀況

執行 $ gulp watch 來開始看守檔案

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

  // 看守 .scss 檔
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // 看守 .js 檔
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // 看守圖片檔
  gulp.watch('src/images/**/*', ['images']);

});

app目錄建立

放html的程式

LiveReload

即時重整監看

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

  // 建立即時重整伺服器
  livereload.listen();

  // 看守所有位在 dist/  目錄下的檔案，一旦有更動，便進行重整
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

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

gulp.task('webserver', function() {
  gulp.src('./app/')
    .pipe(webserver({
      port:1234,
      livereload: true,
      directoryListing: false,
      open: true,
      fallback: 'index.html'
    }));
});

gulp.task('default',['webserver']);

完整檔案

/**
 * [gulp set file]
 */
/*!
 * gulp install plug is :
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
 *
 * 於cmd執行gulp可以執行
 *
 */

//== Load plugins ==//
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    webserver = require('gulp-webserver'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

//== 設定任務參數 ==//
var TaskSet = {
    'webserver' : true, //啟動server
    'style' : false, //SCSS編譯
    'scripts' : false, //script編譯
    'images' : false //圖片壓縮
};


//== Default task ==//
gulp.task('default', ['clean'], function() {
    //gulp.start('styles', 'scripts', 'images','webserver');
    for(key in TaskSet){
        if(TaskSet[key]){
            gulp.run(key);
        }
    }
});

//== Watch ==//
gulp.task('watch', function() {
    /*
    var server = ['jasmine', 'embed'];
    var client = ['scripts', 'styles', 'copy', 'lint'];
    gulp.watch('app/*.js', server);
    gulp.watch('spec/nodejs/*.js', server);
    gulp.watch('app/backend/*.js', server);
    gulp.watch('src/admin/*.js', client);
    gulp.watch('src/admin/*.css', client);
    gulp.watch('src/geojson-index.json', ['copygeojson']);
    */

    // Watch .scss files
    gulp.watch('src/styles/**/*.scss', ['styles']);

    // Watch .js files
    gulp.watch('src/scripts/**/*.js', ['scripts']);

    // Watch image files
    gulp.watch('src/images/**/*', ['images']);

    //--[即時重整監看]--//
    // Create LiveReload server
    livereload.listen();

    // Watch any files in app/, reload on change
    gulp.watch(['app/**']).on('change', livereload.changed);

});

//-------------------------Task-------------------------//

//== Server ==//
gulp.task('webserver', function() {
    gulp.src('app/')
        .pipe(webserver({
            port:1234,
            livereload: true,
            directoryListing: false,
            open: true,
            fallback: 'index.html'
        }));
});

//== Clean ==//
//刪除原路徑下的檔案
gulp.task('clean', function() {
    return del(['app/styles', 'app/scripts', 'app/images']);
});


//-------------------------Task-------------------------//

//== Styles ==//
/**
 * [設置編譯 Sass ]
 * 我們將編譯 Sass，接著通過 Autoprefixer，最後儲存結果到我們的目的地。
 * 產生一個縮小化的 .min 版本、自動重新整理頁面
 * 並且通知任務已經完成：
 */
gulp.task('styles', function() {
    return sass('src/styles/main.scss', { style: 'expanded' })
        .pipe(autoprefixer('last 2 version'))
        .pipe(gulp.dest('app/styles'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cssnano())
        .pipe(gulp.dest('app/styles'))
        .pipe(notify({ message: 'Styles task complete' }));
});

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

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

寫程式囉

運行

gulp

watch結果如下

D:\project\App\TestGulp>gulp
[23:18:45] Using gulpfile D:\project\App\TestGulp\gulpfile.js
[23:18:45] Starting 'clean'...
[23:18:45] Finished 'clean' after 9.01 ms
[23:18:45] Starting 'default'...
[23:18:45] Starting 'styles'...
[23:18:45] No files matched your Sass source.
[23:18:45] Starting 'scripts'...
ERROR: Can't find config file: .jshintrc

別人誇價如何使用

從網站下載相關框架

執行npm install

會將package.json內的套件載到這個專案內

執行gulp即可運行

公開框架

*

https://github.com/goodbomb/angular-gulp-browserify-starter/tree/master/app/common

*

http://ryanchristiani.com/getting-started-with-gulp-and-sass/

參考

results matching ""

    No results matching ""