2017-10-16 1 views
0

Wenn meine Dateistruktur wie folgt aussieht, in demselben Ordner gulp watch arbeitet und registrieren ändertGulp keine Änderungen registrieren, wenn Bewegung SCSS Dateien in Ordnern

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

main.scss

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

Aber als ich bewegen SCSS Dateien in Ordner wie folgt aus:

enter image description here

Und importieren Sie es aus Hauptdatei:

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

Es funktioniert nicht, und registrieren Sie keine Änderungen, wenn schluck Uhr laufen. Hier ist meine 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']);

Also, was ist das Problem mit meiner Projektstruktur, so dass gulp watch nicht?

+0

Können Sie es ohne Teilzahlen in scss Dateinamen versuchen? – Rahi

+1

Sollte 'config.stylesPath + '**/*. Scss'' nicht' config.stylesPath +'/**/*. Scss'' sein? – peinearydevelopment

Antwort

0

Es war ein Problem mit meiner gulp.js Datei, Aufgabenüberwachung. Ich ändere es zu:

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

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

}) 
Verwandte Themen