Question

这个让我肯定是在摸不着头脑。我的项目设置如此

.
├── app
|   └── styles
|          ├── foundation
|          |       └── foundatipn.scss
|          └── app.scss
├── build
|   └── styles
└         └── app.css

我的gulp-sass任务编译app.scss正确并将最终文件放在build.styles中。

然而，当gulp watch触发sass任务时，它会在app / styles /中放入一个css文件。它仍然会编译正确的文件来构建/样式。

以下相关代码

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    notify = require('gulp-notify'),
    include = require('gulp-include'),
    autoprefixer = require('gulp-autoprefixer'),
    sass = require('gulp-ruby-sass'),
    sourcemaps  = require('gulp-sourcemaps'),
    cssnano = require('gulp-cssnano'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream');
var reload = browserSync.reload;
var dest = './build';
var src = './app';

gulp.task("sass", function(cb){
    //Compile Foundation SCSS to CSS
    var stream = sass('app/styles/app.scss',{
        loadPath: ['app/styles/foundation'],
        })
        //.pipe(notify("Compiling SCSS, Autoprefixeing, Minifying and Creating Sourcemaps"))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
        }))
        .pipe(cssnano())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest(dest + '/styles'))
        .pipe(reload({stream: true}));
    return stream;
});

gulp.task('watch', function(){
    gulp.watch('app/**/*.html', ['markup']);
    gulp.watch('app/styles/**/*.scss', ['sass']);
    gulp.watch('app/scripts/**/*.js',['js']);
    gulp.watch('app/images/**/*.png', ['images']);
});

Answer 1

根据您使用的gulp / gulp sass版本，它可能是您的“基础”。

使用/ ** /设置gulp的目的，将其设置为dest文件/文件夹的基础。

查看此信息： documentation

更重要的是，此行：如果要避免这种情况，则必须明确指定基本选项：

gulp.src（'some / path / ** / js / *。js'，{base：'。'}） .pipe（gulp.dest（'output'））;

希望对您有帮助。

只有在gulp watch触发时，Gulp sass才会编译到错误的目录

1 个答案: