这个肯定让我摸不着头脑。我的元素是这样设置的
.
├── app
| └── styles
| ├── foundation
| | └── foundatipn.scss
| └── app.scss
├── build
| └── styles
└ └── app.css
我的 gulp-sass 任务正确编译了 app.scss 并将最终文件放入 build.styles。
然而,当 sass 任务被 gulp watch 触发时,它会在 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']);
});
最佳答案
根据您使用的 gulp/gulp sass 版本,它可能是您的“基础”。
关于 gulp 使用/**/设置目标文件/文件夹的基础。
看这篇文章: how base option affects gulp.src & gulp.dest
更重要的是这一行: 如果你想避免这种情况,你必须明确指定基本选项:
gulp.src('some/path/**/js/*.js', {base:'.'}) .pipe(gulp.dest('输出'));
希望对你有帮助。
关于css - Gulp sass 仅在被 gulp watch 触发时编译到错误的目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39643294/