Question

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

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

仅当您在f中定义的目录中更改文件时，

gulp.watch才会运行您的任务'compile_scss'。直到gulp看不到文件中的任何修改 - SCSS_SRC什么都不做。试试gulp.watch。我建议您使用gulp.task('default', ['compile_scss', 'watch_scss']);插件让任务gulp-sync一个接一个地运行，因为如果您按照我的推荐修改默认任务 - 这两个任务将并行运行

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**');

如果您认为此答案有帮助，请竖起大拇指：）

为什么Gulp不创建css文件？

3 个答案: