3

刚从 Gulp 开始 - 这太棒了。这可行，但 rev.manifest 会自行写入，并且其中没有“样式”和“脚本”。一定会有更好的办法。正确的？:-)

gulp.task('script', function() {
  var scripts = gulp.src('source-js/main.js')
                  .pipe(uglify())
                  .pipe(rev())
                  .pipe(gulp.dest());

  var manifest = gulp.src('./rev-manifest.json');

  return es.merge(scripts, manifest)
           .pipe(rev.manifest())
           .pipe(gulp.dest('.'))
});

gulp.task('style', function() {
  var styles = gulp.src('source-less/style.less')
                  .pipe(less({compress: true}))
                  .pipe(rev())
                  .pipe(gulp.dest());

  var manifest = gulp.src('./rev-manifest.json');

  return es.merge(styles, manifest)
           .pipe(rev.manifest())
           .pipe(gulp.dest('.'))
});

gulp.task('watch', function () {
    gulp.watch('source-less/**/*.less', ['style']);
    gulp.watch('source-js/**.js', ['script']);
});

编辑：尝试使用 es 仍然是编写清单的情人：

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

  var scripts = gulp.src('source-js/main.js')
                  .pipe(uglify())
                  .pipe(rev())
                  .pipe(gulp.dest('assets/js'));

  var manifest = gulp.src('./rev-manifest.json');

  return es.merge(scripts, manifest)
           .pipe(rev.manifest())
           .pipe(gulp.dest('.'))
});

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

  var styles = gulp.src('source-less/style.less')
                  .pipe(less({compress: true}))
                  .pipe(rev())
                  .pipe(gulp.dest('assets/css'));

  var manifest = gulp.src('./rev-manifest.json');

  return es.merge(styles, manifest)
           .pipe(rev.manifest())
           .pipe(gulp.dest('.'))
});
4

2 回答 2

3

有一个示例可以将其manifest.json直接添加到流中以防止其被覆盖，但目前gulp#396中存在一个与vinyl-fs#25相关的错误，该错误不允许它。对于修复后的未来读者：

gulp.task('scripts', function() {
  gulp.src('source-js/main.js')
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('assets/js'))
    .pipe(gulp.src('./rev-manifest.json'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('assets'));
});

但是现在，您应该为此使用事件流。请注意，在合并gulp-rev#59之前，它不会工作。

var es = require('event-stream');

gulp.task('scripts', function() {
  var scripts = gulp.src('source-js/main.js')
                  .pipe(uglify())
                  .pipe(rev())
                  .pipe(gulp.dest('assets/js'));

  var manifest = gulp.src('./rev-manifest.json');

  return es.merge(scripts, manifest)
           .pipe(rev.manifest())
           .pipe(gulp.dest('.'))
});

您的style任务将遵循相同的模式。所有这些都假设您manifest.json将位于 根目录中。

于 2014-09-26T08:16:21.150 回答
0

这是我的解决方案。

文件夹结构是

└── src
    ├── images
    │   ├── skywalker.jpeg
    │   └── space.png
    ├── js
    │   ├── index.js
    │   ├── index2.js
    │   └── page.js
    ├── styles
    │   ├── index.css
    │   ├── index.styl
    │   ├── module
    │   │   ├── com.css
    │   │   └── com.styl
    │   └── page.css
    └── view
        ├── index.html
        └── page.html

我的吞咽任务是

/**
 *  production
 */

var jsProductionPipe = lazypipe()
    .pipe(jshit)
    .pipe(jshit.reporter, 'default')
    .pipe(uglify, {
        compress: {
            dead_code: true,
            conditionals: true,
            booleans: true,
            unused: true,
            if_return: true,
            join_vars: true
        }
    }),
    cssProductionPipe = lazypipe()
        .pipe(stylus).pipe(minifyCss);

gulp.task("deploy_js_css", ["deploy_image"], function () {

    var manifest = gulp.src(path.join(__dirname, "dist/rev-manifest.json"));

    return gulp.src(["src/**/*.styl", "src/**/*.js"])
        .pipe(debug({title: '[deploy_js_css]:'}))
        .pipe(revReplace({manifest: manifest, replaceInExtensions: ['.js', '.css', '.html', '.hbs', '.styl']}))
        .pipe(gulpif('*.styl', cssProductionPipe()))
        .pipe(gulpif('*.js', jsProductionPipe()))
        .pipe(rev())
        .pipe(gulp.dest("dist"))
        .pipe(rev.manifest("dist/rev-manifest.json", {
            merge: true
        }))
        .pipe(revDel({ dest: 'dist', oldManifest: path.join(__dirname, "dist/rev-manifest.json") }))
        .pipe(gulp.dest("./"));
});

gulp.task("deploy_image", function() {
    return gulp.src("src/images/*", {
        base: "src/"
    })
        .pipe(debug({title: '[deploy_image]:'}))
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(rev())
        .pipe(gulp.dest("dist"))
        .pipe(rev.manifest("dist/rev-manifest.json", {
            merge: true
        }))
        .pipe(revDel({ dest: 'dist', oldManifest: path.join(__dirname, "dist/rev-manifest.json") }))
        .pipe(gulp.dest("./"));
});

gulp.task('production', ['deploy_image', 'deploy_js_css']);
于 2016-01-08T11:08:12.853 回答