当我的文件结构如下所示时,同一文件夹gulp watch
正在运行并注册更改
├─ styles
├── _color.scss
├── _mixins.scss
├── _layout.scss
├── _navigation.scss
├── main.scss
main.scss
@import "colors";
@import "mixins";
@import "navigation";
但是当我将scss文件移动到这样的文件夹中时:
从主文件中导入:
@import "globals/colors";
@import "globals/mixins";
@import "components/navigation";
它没有工作,并且在运行gulp watch时没有注册任何更改。这是我的gulpfile.js:
var gulp = require('gulp'),
sass = require ('gulp-sass'),
notify = require('gulp-notify'),
mainBowerFiles = require('main-bower-files'),
filter = require('gulp-filter'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
var config = {
stylesPath: 'assets/styles',
jsPath: 'assets/scripts',
bowerDir: 'bower_components'
,
outputDir: 'public'
}
gulp.task('js', function() {
return gulp.src(mainBowerFiles().concat(config.jsPath+'/*'))
.pipe(filter('**/*.js'))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest(config.outputDir + '/js'));
});
gulp.task('icons', function() {
return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest(config.outputDir + '/fonts'));
});
gulp.task('css', function() {
return gulp.src(config.stylesPath + '/main.scss')
.pipe(sass({
outputStyle: 'compressed',
includePaths: [
config.stylesPath,
config.bowerDir + '/bootstrap-sass/assets/stylesheets',
config.bowerDir + '/font-awesome/scss'
]
}).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest(config.outputDir + '/css'));
});
gulp.task('watch', function(){
gulp.watch([config.stylesPath + '**/*.scss', config.stylesPath + '**/*.sass', config.stylesPath + '**/*.css'], ['css']);
gulp.watch([config.jsPath + '**/*.js'], ['js']);
})
gulp.task('default', ['js', 'css', 'icons']);

那么,我的项目结构有什么问题,以致gulp watch
无效?
答案 0 :(得分:0)
我的http://localhost:8000/default.png
文件,任务监视是个问题。我将其更改为:
gulp.js