Инкрементальная сборка без глотка

Как и Эшвелл, я счел полезным использовать импорт, чтобы убедиться, что все мои файлы LESS имеют доступ к переменным и миксинам, которые им нужны. Я также использую файл LESS с импортом для целей объединения. Это имеет несколько преимуществ:

1. Я могу использовать функции LESS для выполнения сложных задач, таких как переопределение значений переменных для создания нескольких тем или добавление класса перед каждым правилом в другом файле LESS.
2. Плагин concat не нужен.
3. Такие инструменты, как Web Essentials для Visual Studio, могут предоставить справку по синтаксису и предварительный просмотр выходных данных, поскольку каждый файл LESS полностью способен обрабатываться сам по себе.

Если вы хотите импортировать переменные, примеси и т. д., но не хотите на самом деле выводить все содержимое другого файла, вы можете использовать:

@import (reference) "_colors.less";

После нескольких дней усилий я, наконец, смог получить инкрементную сборку, которая правильно перестраивает все объекты, зависящие от измененного мной LESS-файла. Я задокументировал результаты здесь. Это последний глоток:

/*
 * This file defines how our static resources get built.
 * From the StaticCommon root folder, call "gulp" to compile all generated
 * client-side resources, or call "gulp watch" to keep checking source 
 * files, and rebuild them whenever they are changed. Call "gulp live" to 
 * do both (build and watch).
 */

/* Dependency definitions: in order to avoid forcing everyone to have 
 * node/npm installed on their systems, we are including all of the 
 * necessary dependencies in the node_modules folder. To install new ones,
 * you must install nodejs on your machine, and use the "npm install XXX" 
 * command. */
var gulp = require('gulp');
var less = require('gulp-less');
var LessPluginCleanCss = require('less-plugin-clean-css'),
    cleanCss = new LessPluginCleanCss();
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var cache = require('gulp-cached');
var progeny = require('gulp-progeny');
var filter = require('gulp-filter');
var plumber = require('gulp-plumber');
var debug = require('gulp-debug');

gulp.task('less', function() {
    return gulp
        // Even though some of our LESS files are just references, and 
        // aren't built, we need to start by looking at all of them because 
        // if any of them change, we may need to rebuild other less files.
        .src(
        ['Content/@(Theme|Areas|Css)/**/*.less'],
        { base: 'Content' })
        // This makes it so that errors are output to the console rather 
        // than silently crashing the app.
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                // And this makes it so "watch" can continue after an error.
                this.emit('end');
            }
        }))
        // When running in "watch" mode, the contents of these files will 
        // be kept in an in-memory cache, and after the initial hit, we'll
        // only rebuild when file contents change.
        .pipe(cache('less'))
        // This will build a dependency tree based on any @import 
        // statements found by the given REGEX. If you change one file,
        // we'll rebuild any other files that reference it.
        .pipe(progeny({
            regexp: /^\s*@import\s*(?:\(\w+\)\s*)?['"]([^'"]+)['"]/
        }))
        // Now that we've set up the dependency tree, we can filter out 
        // any files whose
        // file names start with an underscore (_)
        .pipe(filter(['**/*.less', '!**/_*.less']))
        // This will output the name of each LESS file that we're about 
        // to rebuild.
        .pipe(debug({ title: 'LESS' }))
        // This starts capturing the line-numbers as we transform these 
        // files, allowing us to output a source map for each LESS file 
        // in the final stages.
        // Browsers like Chrome can pick up those source maps and show you 
        // the actual LESS source line that a given rule came from, 
        // despite the source file's being transformed and minified.
        .pipe(sourcemaps.init())
        // Run the transformation from LESS to CSS
        .pipe(less({
            // Minify the CSS to get rid of extra space and most CSS
            // comments.
            plugins: [cleanCss]
        }))
        // We need a reliable way to indicate that the file was built
        // with gulp, so we can ignore it in Mercurial commits.
        // Lots of css libraries get distributed as .min.css files, so
        // we don't want to exclude that pattern. Let's try .opt.css 
        // instead.
        .pipe(rename(function(path) {
            path.extname = ".opt.css";
        }))
        // Now that we've captured all of our sourcemap mappings, add
        // the source map comment at the bottom of each minified CSS 
        // file, and output the *.css.map file to the same folder as 
        // the original file.
        .pipe(sourcemaps.write('.'))
        // Write all these generated files back to the Content folder.
        .pipe(gulp.dest('Content'));
});

// Keep an eye on any LESS files, and if they change then invoke the 
// 'less' task.
gulp.task('watch', function() {
    return gulp.watch('Content/@(Theme|Areas|Css)/**/*.less', ['less']);
});

// Build things first, then keep a watch on any changed files.
gulp.task('live', ['less', 'watch']);

// This is the task that's run when you run "gulp" without any arguments.
gulp.task('default', ['less']);

Теперь мы можем просто запустить gulp live для сборки всех наших LESS-файлов один раз, а затем позволить каждому последующему изменению создавать только те файлы, которые зависят от измененных файлов.

Поэтому, когда я хочу выполнять добавочные сборки в gulp, я делаю это, абстрагируя внутренний процесс задачи gulp, таким образом мне не нужно беспокоиться о сохранении кеша.

// Create a function that does just the processing
var runCompile = function( src, dest, opts ){
  return gulp.src( src )
    .pipe(less( opts ))
    .pipe(gulp.dest( dest ));
};

// Leverage the function to create the task
gulp.task( 'less', function(){
  return runCompile( fileGlob, 'output', {} );
});

// Use it again in the watch task
gulp.task( 'less:watch', function(){
  return gulp.watch( fileGlob )
    .on( "change", function( event ){
      // might need to play with the dest dir here
      return runCompile( event.path, 'output', {} );
    });
});

Это отлично работает для меня, и я использую этот шаблон во всех своих задачах с глотком. Однако я заметил, что иногда gulp будет раздавливать пути во время просмотра «при изменении», если он получает один файл. В этом случае я сам манипулирую путем, что-то вроде path.dirname(srcPath.replace( srcDir, outputDir )) в качестве аргумента dest для функции runCompile.

Изменить: только что понял, что это, вероятно, не решит вашу проблему «потерянных переменных». У меня нет ничего на уме, чтобы решить эту проблему, поскольку я организую свои файлы LESS с интенсивным использованием импорта, поэтому каждый файл, которому потребуется набор переменных, будет иметь оператор импорта, гарантирующий, что они там.

На самом деле мы можем использовать gulp-newer и gulp-progeny-mtime для этой задачи. Подход Стриплинга является почти лучшим, ожидайте, что каждый раз, когда вы запускаете задачу без глотка, он будет снова компилировать все с нуля, а затем начнет просматривать файлы. Это будет стоить вам много времени, если вы работаете с меньшим количеством таблиц стилей. gulp-progeny-mtime похож на gulp-progeny, за исключением того, что он делает настоящие хардкорные вещи. Каждый раз, когда файлы проходят через gulp-progeny-mtime, он проверяет любые изменения в импорте, и если это так, он корректирует mtime текущего файла в потоке, что приводит к его прохождению через >gulp-новее. Я чувствую, что это лучше, потому что мы даже ничего не кешируем.

   //Compile less for deployment 
   gulp.task("less", () => {
      return gulp
        .src(["static/less/**/*.less"])
        .pipe(progenyMtime())
        .pipe(
          plumber({
            errorHandler: function (err) {
              log(chalk.bgRed.white.bold(err.message));
            },
          })
        )
        .pipe(filter(["**/*.less", "!**/_*.less", "!static/less/includes*/**"]))
        .pipe(newer({ dest: "static/css/", ext: ".css" }))
        .pipe(debug({ title: "LESS" }))
        .pipe(
          less({
            plugins: [cleanCss, autoprefix],
          })
        )
        .pipe(gulp.dest("static/css/"));
    });

    //Watch changes is less and compile if changed.
    gulp.task("watch-less", () => {
      return gulp.watch("static/less/**/*.less", gulp.series("less"));
    });
    
    //Compile all less files on first run ( if changed ) then compile only modified files from next run
    gulp.task("live-less", gulp.series("less", "watch-less"));