Gulp Sass不编译局部

所以我使用Gulp Sass与gulp-changed(我也尝试了gulp-newer与更新的语法变化)，并在我的文件夹中观看所有的scss文件。

当我改变一个基本的scss文件时，它将编译没有任何问题。

但是，如果我更改了一个部分，它将不会编译依赖于该部分的sass文件。

口

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:varwwwmobile 2stylesheetssitescssresponsivetoolsbase.css
[15:18:24] Starting 'sass'...
[15:18:24] Finished 'sass' after 289 ms
[BS] File changed: c:varwwwmobile 2stylesheetssitescssresponsivetoolsanotherBase.css

我想它编译scss每当一个部分被改变。

现在来有点晚了，但如果我没理解错的话;你想运行你的构建当你改变任何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文件混合)。

希望这对你的情况有意义-否则我真的很抱歉。

尝试var SRC = './stylesheets/**/{*.scss,_*.scss}';如果部分位于同一文件夹或子文件夹

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

默认情况下，它只能检测流中的文件是否存在改变。

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

这可能更多地与您如何包含部分有关-您是否将部分导入到您的基本sass文件中?

。，是碱。SCSS有

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

在某处?

编辑

好吧，我刚刚遇到了一个类似的问题，我最终只是使用gulp-更新+循环通过一个数组来生成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几乎也能达到你想要的效果，但也有同样的won - not -compile-partials问题。

我使用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}))
})

这是一个很好的问题。我曾经面对过这个问题，并在很长一段时间后摆脱了它。因为当时我在网上找不到这样的东西来摆脱它。

- 摘要
  - _base.scss
- 基地/gh><
- 组件/gh>
- 页
- 供应商
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

相关内容

最新更新

热门标签：