当将scss文件移动到文件夹中时,Gulp不会注册更改

时间:2017-10-16 14:59:17

标签: sass gulp

当我的文件结构如下所示时,同一文件夹gulp watch正在运行并注册更改

├─ 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";

它没有工作,并且在运行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无效?

1 个答案:

答案 0 :(得分:0)

我的http://localhost:8000/default.png文件,任务监视是个问题。我将其更改为:

gulp.js