Gulp.js のジェネレーターの探求

2014 年 2 月 3 日

Yeoman の最初の公式ジェネレーターの作業が Gulp.js で開始されました。

Gulp は、構成よりコードに焦点を合わせたストリーミングビルドシステムです。ノードストリームのパワーを活用することで、一時ファイルをディスクに書き込む必要がなくなるため、より高速なビルド時間を可能にします。ファイルを投入するだけで、ファイルが生成されます。

Yeoman チームは Grunt のサポートを中止する予定はありません。むしろ、Grunt と Gulp の両方が共存可能であると考えており、可能な限り自動化ツールで両方のコミュニティをサポートすることを望んでいます。

ウェブアプリケーション向けの Grunt ジェネレーターをベースとした Gulp ジェネレーターがあり、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 に関する記事の一部です。

« 他の投稿を表示する