为什么Gulp不创建css文件？

Question

我有一个问题，因为我在gulpfiles.js中创建了任务，但是当我创建我的文件：.scss然后我在bash中编写命令gulp。我没有错误，但css文件夹中没有文件。在我的bash这个代码apeearing：

C:\Users\DOM\Desktop\react\my-react-project>gulp
[16:33:25] Using gulpfile ~\Desktop\react\my-react-project\gulpfile.js
[16:33:25] Starting 'watch_scss'...
[16:33:25] Finished 'watch_scss' after 13 ms
[16:33:25] Starting 'default'...
[16:33:25] Finished 'default' after 12 μs

这是我从gulpfile.js的代码：

    'use strict';

    //dependencies
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var minifyCSS = require('gulp-clean-css');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    var changed = require('gulp-change');




    /////////////////////////////////
    // - SCSS/CSS
    ////////////////////////////////

   var SCSS_SRC = './src/Assets/scss/**/*.scss';
   var SCSS_DEST = './src/Assets/css';

   //Compile SCSS
   gulp.task('compile_scss',function () {

   gulp.src(SCSS_SRC)
   .pipe(sass().on('error', sass.logError))
   .pipe(minifyCSS())
   .pipe(rename({suffix:'.min'}))
   .pipe(changed(SCSS_DEST))
   .pipe(gulp.dest(SCSS_DEST));
   });


   //Detect changes in SCSS
   gulp.task('watch_scss', function(){
   gulp.watch(SCSS_SRC, ['compile_scss']); 
   });


   //Run tasks
   gulp.task('default', ['watch_scss']);

我找不到我的错误在哪里。

Answer 1

只有当您在gulp.watch中定义的目录中更改文件时，'compile_scss'才会运行您的任务SCSS_SRC。直到gulp看不到文件中的任何修改 - gulp.watch什么都不做。试试gulp.task('default', ['compile_scss', 'watch_scss']);。我建议你使用gulp-syncplugin使任务'compile_scss', 'watch_scss'一个接一个地运行，因为如果你按照我的建议修改你的默认任务 - 这两个任务将并行运行

Answer 2

我已将以前的代码更改为此代码：

var gulp = require('gulp');


//var jshint = require('gulp-jshint');
var sass =   require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-clean-css');

var SRC = './src/Assets/scss/**/*.scss';
var DEST = './src/Assets/css/';

gulp.task('styles', function() {
    gulp.src(SRC)
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest(DEST));
});

//Watch task
gulp.task('default',function() {
    gulp.watch(SRC,['styles']);
});

一切正常但我不明白为什么。

Answer 3

在这一行

var changed = require('**gulp-change**');

你应该要求改变，所以这应该工作正常。

var changed = require('**gulp-changed**');

如果你觉得这个答案有帮助，请大家赞一下:)