我有一个 gulpfile.js,其内容如下。我希望它生成 bootstrap.min.css 并在我将 LESS 文件保存在/less 文件夹中后立即将其上传到服务器。问题是:只有保存文件两次后,才会上传最终结果。我想我做错了什么。
这是我正在使用的代码:
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 文件保存两次,这让我很烦恼。 任何人都可以识别错误吗?如果您需要更多信息,请随时询问。
谢谢,
汤姆
最佳答案
您可能有两个问题:
- 在“less”任务中添加一个 return,这样 gulp 就会知道它已经完成。
- 您不能在“watch”任务中假设 ['less', 'deploy'] 以任何特定顺序运行/完成。它们并行运行,因此顺序可能会有所不同。与“默认”任务相同。
最好让你的“部署”任务依赖于“较少”任务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/' ) );
} );
关于javascript - 为什么在 Gulp/Vinyl-ftp 上传 bootstrap.min.css 之前我必须保存 LESS 源文件两次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45172081/