2017-10-16 46 views
0

当我的文件结构是这样的,在同一个文件夹gulp watch正在工作并注册变更咕嘟咕嘟不能注册修改时的举动SCSS文件到文件夹中

├─ styles 
    ├── _color.scss 
    ├── _mixins.scss 
    ├── _layout.scss 
    ├── _navigation.scss 
    ├── main.scss 

main.scss

@import "colors"; 
@import "mixins"; 
@import "navigation"; 

但是,当我移动SCSS文件夹成这样:

enter image description here

并导入它从主文件:

@import "globals/colors"; 
@import "globals/mixins"; 
@import "components/navigation"; 

它不工作,而不是注册运行一饮而尽手表时的任何变化。这里是我的gulpfile.js:

var gulp = require('gulp'), 
 
\t \t sass = require ('gulp-sass'), 
 
\t \t notify = require('gulp-notify'), 
 
\t \t mainBowerFiles = require('main-bower-files'), 
 
\t \t filter = require('gulp-filter'), 
 
\t \t autoprefixer = require('gulp-autoprefixer'), 
 
\t \t concat = require('gulp-concat'), 
 
\t \t uglify = require('gulp-uglify'); 
 

 
var config = { 
 
\t stylesPath: 'assets/styles', 
 
\t jsPath: 'assets/scripts', 
 
\t bowerDir: 'bower_components'
 , 
 
\t outputDir: 'public' 
 
} 
 

 
gulp.task('js', function() { 
 
\t return gulp.src(mainBowerFiles().concat(config.jsPath+'/*')) 
 
\t \t .pipe(filter('**/*.js')) 
 
\t \t .pipe(concat('main.js')) 
 
\t \t .pipe(uglify()) 
 
\t \t .pipe(gulp.dest(config.outputDir + '/js')); 
 
}); 
 

 
gulp.task('icons', function() {
 
 
\t return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
 
 
\t \t .pipe(gulp.dest(config.outputDir + '/fonts'));
 
 
}); 
 

 
gulp.task('css', function() { 
 
\t return gulp.src(config.stylesPath + '/main.scss') 
 
\t \t .pipe(sass({ 
 
\t \t \t \t outputStyle: 'compressed', 
 
\t \t \t \t includePaths: [ 
 
\t \t \t \t \t config.stylesPath, 
 
\t \t \t \t \t config.bowerDir + '/bootstrap-sass/assets/stylesheets', 
 
\t \t \t \t \t config.bowerDir + '/font-awesome/scss' 
 
\t \t \t \t ] 
 
\t \t \t }).on('error', sass.logError)) 
 
\t \t .pipe(autoprefixer()) 
 
\t \t .pipe(gulp.dest(config.outputDir + '/css')); 
 
}); 
 

 
gulp.task('watch', function(){ 
 
\t gulp.watch([config.stylesPath + '**/*.scss', config.stylesPath + '**/*.sass', config.stylesPath + '**/*.css'], ['css']); 
 

 
\t gulp.watch([config.jsPath + '**/*.js'], ['js']); 
 

 
}) 
 

 
gulp.task('default', ['js', 'css', 'icons']);

那么,什么是我的项目结构的问题,使gulp watch不工作?

+0

您可以在scss文件名中尝试使用它吗? – Rahi

+1

不应该'config.stylesPath +'**/*。scss''为'config.stylesPath +'/ **/*。scss''? – peinearydevelopment

回答

0

这是我的gulp.js文件,任务监视的问题。我将其更改为:

gulp.task('watch', function(){ 
    gulp.watch([config.stylesPath + '/**/*.scss', config.stylesPath + '/**/*.sass', config.stylesPath + '/**/*.css'], ['css']); 

    gulp.watch([config.jsPath + '**/*.js'], ['js']); 

})