探索 Gulp.js 生成器

2014年2月3日

我们已经开始着手开发第一个用于 Gulp.js 的官方 Yeoman 生成器。

Gulp 是一个流式构建系统，它专注于代码而不是配置。通过利用 Node 流的力量，它可以通过避免将临时文件写入磁盘来缩短构建时间。你只需输入一个文件，即可获得一个输出文件。

Yeoman 团队完全没有计划放弃对 Grunt 的支持。相反，我们认为 Grunt 和 Gulp 可以和谐共存，并希望尽我们所能为这两个社区提供一些自动化工具。

我们的 Gulp 生成器基于我们用于 web 应用的 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 的文章

« 查看更多帖子