Gulp Sass无法编译局部文件

Question

所以我正在使用 Gulp、Sass 和 gulp-changed （我也尝试过更新语法的 gulp-newer），并监视我的文件夹中的所有 scss 文件。

当我更改一个基本的 scss 文件时，它会成功编译。

但是，如果我更改了一个局部文件，它就无法编译依赖于该局部文件的 sass 文件。 Gulp

var SRC = './stylesheets/**/*.scss';
var DEST = './stylesheets';
gulp.task('sass', function() {
  return gulp.src(SRC)
    .pipe(changed(DEST, { extension: '.css' }))
    .pipe(plumber({
        errorHandler: handleErrors
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
            includePaths: [
                'C:/var/www/mobile 2/stylesheets'
    ]}))
    .pipe(sourcemaps.write('./'))
    .on('error', handleErrors)
    .pipe(gulp.dest(DEST))
});

文件夹。

├── scss
│    └── base.scss
│          ├── _partial1.scss
│          └── _partial2.scss
│          └── anotherBase.scss
│                 ├── _anotherBasePartial1.scss
│                 └── _anotherBasePartial2.scss

修改 base.scss || anotherBase.scss 会生效，修改 partial1.scss 则不会生效。

如日志所示：

[15:14:02] Starting 'sass'... //here i changed _partial1.scss
[15:14:03] Finished 'sass' after 248 ms
[15:18:20] Starting 'sass'...
[15:18:20] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\base.css
[15:18:24] Starting 'sass'...
[15:18:24] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\anotherBase.css

我希望每当部分文件被修改时，它可以编译scss。

- Jamie Hutber

---

啊，天呐，这浪费了50点声望值... 我本应该做更多的:( - Jamie Hutber

你最终解决了这个问题吗？我也在尝试使用我的gulpfile做同样的事情。 - JacobTheDev

实际上，看起来gulp-newer现在可以使用了！还需要进行更多的测试以确保，但据我所知，它与导入一起正常工作。 - JacobTheDev

Answer 1

虽然有些晚了，但如果我理解正确的话，您想在更改任何scss文件时运行构建，无论它是部分文件还是完整文件，对吗？（但不包括构建中的部分文件-因为这由sass @import处理）。

我通常使用以下方法：

var scss_source = [ 'path/to/scss' ],
    partials_source = [ 'path/to/partials' ];

gulp.task('scss', function () {
    gulp.src( scss_source )
    ...
});

var scss_watcher = gulp.watch([ scss_source, partials_source ], [ 'scss' ]);

我只将scss_source传递给构建程序，但是将两个源文件都传递给观察程序。这样我就可以将所有的局部文件与其余的scss源文件分开，但是任何文件的更改都会触发构建。而且我不需要再添加另一个模块来处理这个问题。

通常我会将我的局部文件保存在单独的目录中（考虑共享，并不与其他scss文件混合）。

希望这在您的情况下有意义 - 如果不是，我很抱歉。

- user1744566

Answer 2

尝试使用以下代码，如果局部文件位于相同的文件夹或子文件夹中：

var SRC = './stylesheets/**/{*.scss,_*.scss}';

- Elmar Höfinghoff

Answer 3

这可能与如何包含局部文件有关，而不是其他任何事情 - 您的@import是否已将局部文件导入基本sass文件中？

例如，base.scss是否具有

@import 'partial1';
@import 'partial2';

在那里的某个地方？

编辑

好的，我刚遇到了类似的问题，最终我使用了gulp-newer + 循环遍历数组来生成gulp任务。所以它看起来像这样：

var sassMain = ['base', 'anotherBase'];
sassMain.forEach(current, function() {
    var src = current + '.scss';        

    return gulp.src(src)
      .pipe(newer(destination)
      .pipe(plumber())
      .pipe(sass())
      .pipe(gulp.dest(destination))
});

在世界上并不是最灵活的东西（特别是对于基本URL的嵌套目录），但它可以达到你想要的目标。gulp-cached也几乎可以通过这种诡计达到你想要的目标，但它也有相同的无法编译局部问题。

- chrisdhanaraj

---

很遗憾，我已经包含了导入的内容。但还是谢谢你的建议 :) - Jamie Hutber

啊哈，我明白了——这是gulp-changed的问题；看起来gulp-changed并不是正确的插件（https://github.com/sindresorhus/gulp-changed/issues/18）。你可以尝试使用gulp-newer来实现相同的概念。 - chrisdhanaraj

是的，我确实尝试过Newer，但很遗憾它并没有帮助我。这是一个有趣的想法，但我有太多的基础文件需要处理。我可能要看看Node中的vinyl#，看看它能给我带来什么。 - Jamie Hutber

Answer 4

我使用https://github.com/vigetlabs/gulp-starter作为模板，并搭配https://github.com/berstend/gulp-sass-inheritance使用。

它可以工作，但只支持两层深度。

var gulp            = require('gulp');
var debug           = require('gulp-debug');
var browserSync     = require('browser-sync');
var sass            = require('gulp-sass');
var sourcemaps      = require('gulp-sourcemaps');
var handleErrors    = require('../lib/handleErrors');
var autoprefixer    = require('gulp-autoprefixer');
var path            = require('path');
var cached          = require('gulp-cached');
var sassInheritance = require('gulp-sass-inheritance');
var gulpif          = require('gulp-if');
var filter          = require('gulp-filter');
var duration        = require('gulp-duration');
var notify          = require('gulp-notify');

var paths = {
    src : 'app/styles',
    dest: 'grails-app/assets'
}


var isPartial = function (file) {
    return /_/.test(file.relative);
}

//set global.isWatching = true on gulp watch

gulp.task('css', function () {
    return gulp.src(paths.src)
        //.pipe(debug({title: 'before cache:'}))
        .pipe(gulpif(global.isWatching, cached('sass')))
        //.pipe(gulpif(global.isWatching, debug({title: 'after cache:'})))
        .pipe(gulpif(isPartial, sassInheritance({dir: path.join(config.root.src, config.tasks.css.src), debug: false}).on('error', handleErrors))) //,
        .pipe(debug({title: 'after sassInheritance:'}))         
        //.pipe(debug({title: 'after filter:'}))
        .pipe(sourcemaps.init())
        .pipe(sass()).on('error', handleErrors)
        .pipe(debug({title: 'after sass:'}))
        //.pipe(notify('Sass compiled <%= file.relative %>'))
        .pipe(autoprefixer(config.tasks.css.autoprefixer))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.dest))
        //.pipe(duration('after sass'))
        .pipe(debug({title: 'before browserSync:'}))
        .pipe(browserSync.reload({stream: true}))
})

- Alex Shwarc

Answer 5

https://www.npmjs.com/package/gulp-changed

默认情况下，它只能检测流中的文件是否发生了更改。

我猜你可能想要这个：https://github.com/floatdrop/gulp-watch。

- marblewraith

---

它可以检测到任何文件夹中任何*scss文件的更改。问题在于更改会向上滚动到部分基础文件，因此需要构建它们。 - Jamie Hutber

Answer 6

这是一个非常好的问题。我曾经面临过这个问题，花了很多时间才解决掉它。因为当时我在网上找不到任何东西来解决这个问题。

• sass

  • abstracts
    • _base.scss
  • base
  • components
  • layout
  • pages
  • themes
  • vendors
• main.scss

main.scss

@import 'sass/abstracts/base';

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const browserSync = require('browser-sync');
const gulpSequence = require('gulp-sequence');
const sassInheritance = require('gulp-sass-inheritance');
const filter = require('gulp-filter');
var cached = require('gulp-cached');
var gulpif = require('gulp-if');


gulp.task('sass', function() {
    return gulp.src('sass/main.scss')

    
    //filter out unchanged scss files, only works when watching
    .pipe(gulpif(global.isWatching, cached('sass')))
 
    //find files that depend on the files that have changed
    .pipe(sassInheritance({dir: 'sass'}))
    
    .pipe(filter(function (file) {
        return !/\//.test(file.path) || !/^_/.test(file.relative);
      }))


    .pipe(sass())
    .pipe(rename('style.compile.css'))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.stream());
})

gulp.task('serve', ['sass'], function () {
    browserSync.init(
        {
            server: "./"
        }
    );

    gulp.watch('sass/abstracts/**/*.scss', ['sass']);;
    gulp.watch('index.html').on('change', browserSync.reload);
});

运行 gulp serve。

- Md. A. Barik