Yeoman

探索 Gulp.js 的產生器

2014 年 2 月 3 日

我們的第一個官方 Yeoman Gulp.js 產生器已經開始著手進行。

Gulp 是一個 串流 建置系統，專注於代碼而非設定。透過利用節點串流的效能，它可以避免必須將暫存檔寫入磁碟，進而加快建置時間。您只要輸入檔案就能產出檔案。

Yeoman 團隊完全沒有計畫停止支援 Grunt 的打算。相反地，我們認為 Grunt 和 Gulp 可以 愉快地並存，也希望盡可能透過自動化工具支援這兩個社群。

我們的 Gulp 產生器是以我們的 Grunt 網路應用程式 產生器為基礎，您可以在 generator-gulp-webapp 追蹤我們的進度。現在還很初期，但我們的 gulpfile 已經包含處理 HTML、CSS、JS 和圖片的早期版本。請參閱下面範例，了解我們正在做什麼

需要 Gulp 並載入我們的 Gulp 外掛程式

var gulp = require('gulp');

// Load plugins
var $ = require('gulp-load-plugin')({camelize: true});
var server = $.tinyLr();

樣式

gulp.task('styles', function () {
    return gulp.src('app/styles/main.scss')
        .pipe($.sass({
          style: 'expanded',
          loadPath: ['app/bower_components']
        }))
        .pipe($.livereload(server))
        .pipe($.autoprefixer('last 1 version'))
        .pipe($.csso())
        .pipe(gulp.dest('dist/styles'))
        .pipe($.size());
});

腳本

gulp.task('scripts', function () {
    return gulp.src('app/scripts/**/*.js')
        .pipe($.jshint('.jshintrc'))
        .pipe($.jshint.reporter('default'))
        .pipe($.concat('main.js'))
        .pipe($.livereload(server))
        .pipe($.uglify())
        .pipe(gulp.dest('dist/scripts'))
        .pipe($.size());
});

圖片

gulp.task('images', function () {
    return gulp.src('app/images/**/*')
        .pipe($.livereload(server))
        .pipe($.cache($.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'))
        .pipe($.size());
});

監控

gulp.task('watch', function () {
    // Listen on port 35729
    server.listen(35729, function (err) {
        if (err) {
            return console.error(err);
        };

        // Watch .html files
        gulp.watch('app/*.html');

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

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

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

清理

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

建置

// Build
gulp.task('build', ['html', 'styles', 'scripts', 'images']);

// Default task
gulp.task('default', ['clean'], function () {
    gulp.start('build');
});

此時，我們歡迎社群提供協助，幫我們填補新產生器的功能空白。請隨時關注專案回存庫。一旦完成烹飪，我們就會通知您。

進一步閱讀

以下是我們最近閱讀的一些關於 Gulp 的文章

« 查看更多文章