我正在使用Gulp而无法为生产制作最终的开发脚本。

时间:2016-01-20 21:12:10

标签: javascript gulp

所以我在为我的项目生成生产就绪脚本时遇到了一些问题。我正在使用gulp来连接和缩小我的css和js,而且当css工作正常时,gulp js函数不会生成我的最终文件。请参考下面的代码:

gulp.task('js', function() {
 return gulp.src([source + 'js/app/**/*.js'])
  .pipe(concat('development.js'))
  .pipe(gulp.dest(source + 'js'))
  .pipe(rename({
   basename: 'production',
   suffix: '-min',
}))
  .pipe(uglify())
  .pipe(gulp.dest(source + 'js/'))
  .pipe(notify({ message: 'Scripts task complete', onLast: true }));
});

如果有人遇到类似问题或有任何提示,我们将不胜感激:)

2 个答案:

答案 0 :(得分:1)

你的gulpfile没有任何问题。我测试了它,它完美地工作。

我唯一可以猜到的是source未正确设置。你忘记了斜杠'/'吗?

我会建议两件事来弄明白。包括节点 path 库以检查源实际指向的位置,如下所示:

var path = require('path');

// in gulp task ...
path.resolve(path.resolve(source + 'js/app'));

确保它指向您认为的位置。

其次,您可以使用gulp-debug来确定找到的所有文件:

npm install gulp-debug

然后

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


// in gulp task ...

return gulp.src([source + 'js/app/**/*.js'])
           .pipe(concat('development.js'))
           .pipe(debug())
           .pipe(gulp.dest(source + 'js'))
           .pipe(debug())
           // etc.
祝你好运!

答案 1 :(得分:1)

基于评论中的其他信息我意识到你是在一个单独的过程中生成JS文件......

gulp默认是异步的。这归结为所有功能都试图同时运行 - 如果你想要一个特定的订单,它必须是设计的。这很好,因为它非常快,但是可能会很头疼。

问题

以下是基本上发生的事情:

// SOME TASK THAT SHOULD BE RUN FIRST
gulp.task('copy-vendor-files-to-tempfolder', function (done) {
    // copy files to vendor folder
    done()
})

// SOME TASKS THAT DEPEND ON FIRST TASK
gulp.task('complile-styles', function () { /* independent task */ })
gulp.task('concat-vendor-files', function () { /* concat files in vendor folder. depends on vendor files existing */ })

// GENERAL TASK WHICH STARTS OTHERS
gulp.task('ready', ['copy-vendor-files-to-tempfolder', 'compile-styles', 'concat-vendor-files])

当您尝试运行时:

$ gulp ready 
GULP TASK WILL FAIL! Folder is being created at the same time!!
NOWHERE TO COPY FILES!

解决方案

有很多解决方案,但以下模块一次又一次派上用场:

npm install run-sequence

然后在你的gulpfile.js:

var runSequence = require('run-sequence')

gulp.task('ready', function (done) {
    runSequence(
        'create-folders', // do this first,
        [
            'copy-css-files',
            'copy-html-files'
        ], // do these AFTER but in parallel
        done   // callback when ready
    )
}) 

当您尝试运行其他功能时,这将保证文件夹存在。

在您的特定情况下,您应确保连接JS文件的任务在将其复制出供应商之后运行。

注意:我要留下其他答案,因为它包含调试类似问题的有用帮助。

HTH!