Question

我正在尝试为以下操作设置一个小gulp脚本：

将所有Javascript文件连接成一个
Uglify这个构建的Javascript文件
将所有SASS文件编译为CSS
缩小这些CSS文件

此外，我想将步骤1和3的结果保存到一个文件夹（开发人员版本）中，将步骤2和4的结果保存到另一个文件夹（生产版本）中。问题是，gulp似乎没有在步骤2和4中找到生成的文件，因此它总是根据旧版本的文件构建文件。此问题的解决方法是始终运行我的gulp脚本两次。有谁知道为什么会这样，以及我如何解决这个问题？

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');

var DEV_JS = 'dev/js/*.js';
var DEV_SASS = 'dev/sass/*scss';
var BUILT_PROD_JS = 'built/prod/js';
var BUILT_PROD_CSS = 'built/prod/css';
var BUILT_DEV_JS = 'built/dev/js';
var BUILT_DEV_CSS = 'built/dev/css';

gulp.task('concat', function(){
    gulp.src(DEV_JS)
    .pipe(plumber())
    .pipe(concat('simple-ui.js'))
    .pipe(gulp.dest(BUILT_DEV_JS));
});

gulp.task('compress',['concat'], function(){
    return gulp.src(BUILT_DEV_JS + '/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest(BUILT_PROD_JS));
});

gulp.task('sass', function(){
    gulp.src(DEV_SASS)
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest(BUILT_DEV_CSS));
});

gulp.task('minify-css',['sass'], function(){
    return gulp.src(BUILT_DEV_CSS + '/*.css')
    .pipe(plumber())
    .pipe(minifyCSS({keepSpecialComments: 1})
    .pipe(gulp.dest(BUILT_PROD_CSS)));
});

gulp.task('default', ['compress', 'minify-css']);

Answer 1

我会修复代码中的两件事。首先，你的所有任务都应该有return语句（一种方式表明他们已完成其他任务），所以

gulp.task('concat', function(){
   return gulp.src(DEV_JS)
    .pipe(plumber())
    .pipe(concat('simple-ui.js'))
    .pipe(gulp.dest(BUILT_DEV_JS));
});

gulp.task('sass', function(){
   return gulp.src(DEV_SASS)
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest(BUILT_DEV_CSS));
});

其次，你似乎在这一行中有一个拼写错误：

var DEV_SASS = 'dev/sass/*scss';

更改为：

var DEV_SASS = 'dev/sass/*.scss';

在gulp的另一个任务中使用创建的文件

1 个答案: