为什么我必须在 Gulp/Vinyl-ftp 上传 bootstrap.min.css 之前保存 LESS 源文件两次？

Question

我有一份 gulpfile.js，内容如下。我希望它在我将 LESS 文件保存在 /less 文件夹中后立即生成 bootstrap.min.css 并将其上传到服务器。问题是：保存文件两次后，才会上传最终结果。我想我做错了什么。

这是我使用的代码：

    var gulp = require ('gulp'),
    //cleanCSS = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require('gulp-rename'),
    gutil = require('gulp-util'),
    ftp = require ('vinyl-ftp');


// Styles Task using LESS
// Uglifies
gulp.task('less', function(){
    gulp.src('../less/bootstrap.less')
    .pipe(plumber())
    .pipe(less())
    .pipe(autoprefixer({}))
    .pipe(sourcemaps.init())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('../css/'));
});

    // Vinyl FTP 
    gulp.task( 'deploy', function () {

        var conn = ftp.create( {
            host:     '[ftp-address]',
            user:     '[ftp-user]',
            password: '[password]',
            parallel: 10,
            log:      gutil.log
        } );

        var globs = ['../css/bootstrap.min.css'];



        return gulp.src( globs, { base: '.', buffer: false } )
            .pipe( conn.newer( '/public_html/[folder/on/server]/css/' ) ) // only upload newer files
            .pipe( conn.dest( '/public_html/[folder/on/server]/css/' ) );

    } );
// Watch Task
// Watches JS
gulp.task('watch', function(){
    gulp.watch('../less/**/*.less', ['less','deploy']);
});

gulp.task ('default', ['less','deploy','watch']);

由于我不是javascript/npm/gulp/node.js专家，所以我很茫然。这让我很烦恼，我需要保存 less-file 两次。任何人都可以识别错误吗？如果您需要更多信息，请随时询问。

谢谢，

汤姆

Answer 1

您有两个可能的问题：

将 return 放入您的 'less' 任务中，这样 gulp 就会知道它已经完成。
您不能在您的 'watch' 任务中假定 ['less'、'deploy'] 是 run/finished 的任何特定顺序。它们是运行并行的，因此顺序可能会有所不同。与 'default' 任务相同。

最好让你的 'deploy' 任务依赖于 'less' 任务 ala

gulp.task( 'deploy', ['less'], function () {

并更改为

 gulp.watch('../less/**/*.less', ['deploy']);


// Styles Task using LESS
// Uglifies
gulp.task('less', function(){
// add the return to the next line
  return gulp.src('../less/bootstrap.less')
  .pipe(plumber())
  .pipe(less())
  .pipe(autoprefixer({}))
  .pipe(sourcemaps.init())
  .pipe(rename({suffix: '.min'}))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('../css/'));
});

// Watch Task
// Watches JS
gulp.task('watch', function(){
  gulp.watch('../less/**/*.less', ['deploy']);
});

// Vinyl FTP 
gulp.task( 'deploy', ['less'], function () {

    var conn = ftp.create( {
        host:     '[ftp-address]',
        user:     '[ftp-user]',
        password: '[password]',
        parallel: 10,
        log:      gutil.log
    } );

    var globs = ['../css/bootstrap.min.css'];

    return gulp.src( globs, { base: '.', buffer: false } )
        .pipe( conn.newer( '/public_html/[folder/on/server]/css/' ) ) // only upload newer files
        .pipe( conn.dest( '/public_html/[folder/on/server]/css/' ) );

} );

为什么我必须在 Gulp/Vinyl-ftp 上传 bootstrap.min.css 之前保存 LESS 源文件两次？

Why do I have to save the LESS source file twice before Gulp/Vinyl-ftp uploads the bootstrap.min.css?

javascript

twitter-bootstrap

gulp

vinyl-ftp