Css Gulp sass只编译更改的文件'；文件夹

很多关于这个的问题已经被问到了，但不幸的是没有一个能解决我的问题

在办公室里，我们有一个定制的PHP框架和一些应用程序，它们在一个流浪的盒子里运行。 很久以前就定义了一条关于SCSS文件的规则。它们位于“scss”文件夹中，并在../（大多数情况下是css文件夹）中编译。我们使用npm和gulp sass来实现这一点，使用gulp autoprefixer

示例：foo/bar/css/scss/foo.scss-->foo/bar/css/foo.css

问题是，在我们的框架中，我们没有一个通用的“dest”文件夹，因此手表目前是这样的：

framework/**/scss/**/*.scss

我们在框架中有多个子模块，以及scss文件夹的多个可能路径，例如：

• fw/submodule/_www/css/foo/bar/scss/
• fw/submodule/subsubmodule/_www/css/foo/bar/foo/scss/
• fw/submodule/views/tpl/library/libraryname/default/css/foo/bar/scss/

等等

因此，为了在正确的位置编译，我们使用gulprename（foldervar是FW的名称）在祖先文件夹中编译

gulp.task('sass', () => {
    return gulp.src([folder+'**/scss/**/*.scss'])
        .pipe(plumber())
        .pipe(sass(sassOptions))
        .pipe(autoprefixer(autoprefixerOptions))
        .pipe(rename((filePath) => {
            filePath.dirname = filePath.dirname.replace("scss", "");
        })).pipe(gulp.dest(folder));
});

问题是：保存scss文件时，它会编译约200个文件。这是所以长

完整的编译要求在8到20秒之间

在我们的预生产服务器中，我们有一个bash，当您保存一个scss文件时，它运行并编译所有同级scss文件。但我一口吞下去就不行了

我的愿望是：更改scss文件，我们编译他和他的兄弟姐妹。不是每一个scss文件。你认为有可能吗

---

非常感谢。

您可以在gulpfile中创建函数，为每个“组”scss文件指定特定任务。 像这样的

function compileStylesTask(taskName, srcFiles, distFolder, compiledFileName) {
    gulp.task(taskName, function () {
        var style = gulp.src(srcFiles)
            .pipe(sass().on('error', sass.logError))
            .pipe(rename({basename: compiledFileName}))
            .pipe(gulp.dest(distFolder))
        return merge(style);
    });
}

compileStylesTask('someCustomCssTask', [
    'src/css/some.scss',
    'src/css/some2.scss'
], 'someCompiledName', '/dist/css');

gulp.task('watch', function () {
    gulp.watch('/src/scss/some.scss', ['someCustomCssTask']);
});

在您的手表任务中，您现在可以像这样分别为每个组添加手表

function compileStylesTask(taskName, srcFiles, distFolder, compiledFileName) {
    gulp.task(taskName, function () {
        var style = gulp.src(srcFiles)
            .pipe(sass().on('error', sass.logError))
            .pipe(rename({basename: compiledFileName}))
            .pipe(gulp.dest(distFolder))
        return merge(style);
    });
}

compileStylesTask('someCustomCssTask', [
    'src/css/some.scss',
    'src/css/some2.scss'
], 'someCompiledName', '/dist/css');

gulp.task('watch', function () {
    gulp.watch('/src/scss/some.scss', ['someCustomCssTask']);
});

这将仅触发运行此特定scss任务

通过谷歌翻译成英语，如果有什么事让他感到不舒服的话）

原来只有修改过的文件被编译了

输出为：

file.scss
 - file.css
 - file.min.css
 - file.min.css.map

打败Watcher也不管用，他会在“oneSassFileCompile”函数启动后立即创建文件，这些文件是在Watcher停止后创建的

退出情况-启动助手任务。 但还是没有找到如何传递参数。 我不得不求助于一个外部变量，我希望它不会导致许多文件立即更改，并且这个变量没有设法跳过所有文件

对不起我的英语。 还有我的剧本，我第一次给NodeJS写信，第一次喝得烂醉如泥

如果结果是将一个参数直接抛出到子任务中，或者在Watcher中调用函数时强制立即创建文件更好，我将非常高兴看到解决方案

标签：gulpsass只监视一个文件更改并编译css AutoRefixer缩小和映射

gulpfile.js代码：

/**
 * Variables
 */
var gulp        = require('gulp'),
    argv        = require('yargs').argv,
    sass        = require('gulp-sass'),
    rename      = require('gulp-rename'),
    //cssmin      = require('gulp-cssnano'), - a very long initialization, because of what is not convenient for a constant launch, but on the watcher will probably rise norms
    cleanCSS    = require('gulp-clean-css'),
    prefix      = require('gulp-autoprefixer'),
    plumber     = require('gulp-plumber'),
    notify      = require('gulp-notify'),
    sassLint    = require('gulp-sass-lint'),
    sourcemaps  = require('gulp-sourcemaps');

// Temporary solution until gulp 4
// https://github.com/gulpjs/gulp/issues/355
var runSequence = require('run-sequence');

/**
 * Settings
 */
var sassProjectPath = 'templates/**/*.scss';
var sassOptions     = {
    outputStyle: 'expanded'
};
var prefixerOptions = {
    browsers: ['last 5 versions'],
    cascade: true
};


/**
 * Secondary functions
 */
var displayError = function(error) {
    // Initial building up of the error
    var errorString = '[' + error.plugin.error.bold + ']';
    errorString += ' ' + error.message.replace("\n",''); // Removes new line at the end

    // If the error contains the filename or line number add it to the string
    if(error.fileName)
        errorString += ' in ' + error.fileName;

    if(error.lineNumber)
        errorString += ' on line ' + error.lineNumber.bold;

    // This will output an error like the following:
    // [gulp-sass] error message in file_name on line 1
    console.error(errorString);
};
var onError      = function(err) {
    notify.onError({
        title:    "Gulp",
        subtitle: "Failure!",
        message:  "Error: <%= error.message %>",
        sound:    "Basso"
    })(err);
    this.emit('end');
};


// BUILD SUB-TASKS
// ---------------


/**
 * Compiling a single single SASS file
 */
var oneSassFileCompile = function(filePath, destinationDir){
    var fullFileName, fileName, baseDir;

    // Checking the parameters
    if(!filePath) {
        console.log('param filePath miss');
        return false;
    }

    // Find file paths
    fullFileName    = filePath.replace(/\\/g,'/').replace(/.*\//, '');
    fileName        = fullFileName.replace('.'+ fullFileName.split('.').pop(), '');
    baseDir         = filePath.replace(fullFileName, '');

    // If you do not specify a folder to save, use the current
    destinationDir         = destinationDir || baseDir;

    // Compile
    return gulp.src(filePath)
        // Error Handler
        .pipe(plumber({errorHandler: onError}))
        // For generic style.css.map
        .pipe(sourcemaps.init())
        // The actual compilation
        .pipe(sass(sassOptions))
        // Adding Manufacturer Prefixes
        .pipe(prefix(prefixerOptions))
        // Call the file
        .pipe(rename(fileName +'.css'))
        // Save the compiled version
        .pipe(gulp.dest(destinationDir))

        // Compress CSS
        //.pipe(cssmin())
        .pipe(cleanCSS())
        // Rename the suffix
        .pipe(rename({suffix: '.min'}))
        // Save the .map
        .pipe(sourcemaps.write('./'))
        // Save the compressed file
        .pipe(gulp.dest(destinationDir));
};

/**
 * Task to start compiling a specific file
 * For PHPStorm File Watcher
 */
gulp.task('sass-file', function() {
    var filePath        = argv.filePath,
        destinationDir  = argv.destDir;

    // Checking the parameters
    if(!filePath) {
        console.log('argv --filePath miss');
        return false;
    }
    return oneSassFileCompile(filePath, destinationDir)
});


/**
 * Compiling all SASS project files
 * TODO - customize the paths and check
 */
gulp.task('sass-project', function() {
    return gulp.src(sassProjectPath)
        .pipe(plumber({errorHandler: onError}))
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions))
        .pipe(prefix(prefixerOptions))
        .pipe(rename(fileName +'.css'))
        .pipe(gulp.dest('./'))

        // Compress CSS
        //.pipe(cssmin())
        .pipe(cleanCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./'));
});


/**
 * Task checks the SASS project files
 * TODO - customize the paths and check
 */
gulp.task('sass-lint', function() {
    gulp.src(sassProjectPath)
        .pipe(sassLint())
        .pipe(sassLint.format())
        .pipe(sassLint.failOnError());
});


/**
 * Watcher for all SASS project files
 */
// An auxiliary variable to transfer the file path from the watcher to the task
var sassWatchFilePath = '';
gulp.task('sass-watch', function() {
    gulp.watch(sassProjectPath, function(watchEvent){
        console.log('Watcher catch: '+ watchEvent.type +' :: '+ watchEvent.path);

        // Skip deleting
        if(watchEvent.type === 'deleted')
            return;

        // We set the variable with the path and start the helper
        sassWatchFilePath = watchEvent.path;
        gulp.start('sass-watch-helper');
    });
});
/*
 * Taks helper, if you immediately call "oneSassFileCompile" in sass-watch,
  * then the files are not created until the process ends. watcher = (
 */
gulp.task('sass-watch-helper', function() {
    var tmpPath = sassWatchFilePath;
    sassWatchFilePath = null;
    // Compilation
    return oneSassFileCompile(tmpPath);
});


// BUILD TASKS
// ------------


/**
 * Default task
 */
gulp.task('default', function(done) {
    runSequence('sass-project', 'sass-watch', done);
});

/**
 * Project Collector
 */
gulp.task('build', function(done) {
    runSequence('sass-project', done);
});

/**
*变数
*/
var gulp=需要（'gulp'），
argv=require（'yargs'）。argv，
sass=require（'gulp-sass'），
重命名=需要（'gulp-rename'），
//cssmin=require（'gulp-cssnano'），这是一个很长的初始化过程，因为对于持续的发射来说并不方便，但是在观察者身上可能会上升
cleanCSS=require（'gulp-clean-css'），
前缀=require（'gulp-autoprefixer'），
管道工=需要（“管道工”），
notify=需要（'gulp-notify'），
sassLint=require（'gulp-sass-lint'），
sourcemaps=require（'gulp-sourcemaps'）；
//临时解决方案直到吞咽4
// https://github.com/gulpjs/gulp/issues/355
var runSequence=require（'run-sequence'）；
/**
*背景
*/
var sassProjectPath='templates/***.scss'；
var sassOptions={
outputStyle:“扩展”
};
变量前缀器选项={
浏览器：[“最后5个版本”]，
瀑布：对
};
/**
*次要功能
*/
var displayError=函数（错误）{
//错误的初始累积
var errorString='['+error.plugin.error.bold+']'；
errorString+=''+error.message.replace（“\n”，''）；//删除末尾的新行
//如果错误包含文件名或行号，请将其添加到字符串中
if（error.fileName）
errorString+='in'+error.fileName；
如果（错误。行号）
errorString+='on line'+error.lineNumber.bold；
//这将输出如下错误：
//第1行文件名中的[gulp sass]错误消息
console.error（errorString）；
};
var onError=函数（err）{
通知一个错误({
标题：“大口喝”，
副标题：“失败！”，
信息：“错误：”，
声音：“低音”
})（呃）；
这个.emit（'end'）；
};
//构建子任务
// ---------------
/**
*编译单个SASS文件
*/
var oneSassFileCompile=函数（文件路径，destinationDir）{
var fullFileName，fileName，baseDir；
//检查参数
如果（！filePath）{
log（'param filePath miss'）；
返回false；
}
//查找文件路径
fullFileName=filePath.replace（/\\/g，“/”）.replace（/.\/，”）；
fileName=fullFileName.replace（'.'+fullFileName.split（'.'）.pop（），''）；
baseDir=filePath.replace（fullFileName'）；
//如果未指定要保存的文件夹，请使用当前文件夹
destinationDir=destinationDir | | baseDir；
//编撰
return gulp.src（文件路径）
//错误处理程序
.管道（管道工（{errorHandler:onError}））
//对于generic style.css.map
.pipe（sourcemaps.init（））
//实际汇编
.管道（sass（sassOptions））
//添加制造商前缀
.pipe（前缀（前缀选项））
//调用文件
.pipe（重命名（文件名+'.css'））
//保存编译后的版本
.管道（大口目的地）