問題描述

在我的辦公室里，我們正在使用 gulp 來構建我們的 less 文件.我想改進構建任務，因為在我們最近從事的一個大型項目上構建需要花費一秒鐘的時間.這個想法是緩存文件并只傳遞更改的文件.所以我從 google 開始，發現 javascript 的增量構建我認為用更少的錢重寫它們很容易.這是我開始的一個:https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md

In my office we are using gulp to build our less files. I wanted to improve the build task as it took over a second to build on a large project we recently worked on. The idea was to cache the files and only pass the one that changed. So I started with google and found incremental builds for javascript ang thought it would be easy to rewrite them for less. Here's the one I started with: https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md

經過幾次不成功的嘗試后，我最終得到了以下代碼(使用最新的引導發行版進行了測試):

After a few unsuccessful tries I ended up with following code (tested with the latest bootstrap distribution):

var gulp            = require('gulp');
var less            = require('gulp-less');
var concat          = require('gulp-concat');
var remember        = require('gulp-remember');
var cached          = require('gulp-cached');

var fileGlob = [
    './bootstrap/**/*.less',
    '!./bootstrap/bootstrap.less',
    '!./bootstrap/mixins.less'
];

gulp.task('less', function () {
    return gulp.src(fileGlob)
        .pipe(cached('lessFiles'))
        .pipe(remember('lessFiles'))
        .pipe(less())
        .pipe(gulp.dest('output'));
});

gulp.task('watch', function () {
    var watcher = gulp.watch(fileGlob, ['less']);
    watcher.on('change', function (e) {
        if (e.type === 'deleted') {
            delete cached.caches.scripts[e.path];
            remember.forget('lessFiles', e.path);
        }
    });
});

但這只會傳遞更改的文件，并且由于缺少變量定義，less 編譯器會失敗.如果我在 less 任務之前通過管道連接 concat 插件，gulp 會陷入(看似)無限循環.

But this passes only the changed file and the less compiler fails because of the variable definitions missing. If I pipe the concat plugin before the less task, gulp gets stuck in a (seemingly) endless loop.

gulp.task('less', function () {
    return gulp.src(fileGlob)
        .pipe(cached('lessFiles'))
        .pipe(remember('lessFiles'))
        .pipe(concat('main.less')
        .pipe(less())
        .pipe(gulp.dest('output'));
});

有沒有人使用過這些插件或設法以其他方式創建增量更少的構建.這是一個用于測試的(雜亂的)github存儲庫:https://github.com/tuelsch/perfect-less-build

Has anyone experience with those plugins or managed to create an incremental less build in an other way. Here is a (messy) github repository for testing: https://github.com/tuelsch/perfect-less-build

PS:我計劃添加 linting、sourcemaps、minification、evtl.稍后緩存清除和自動前綴.

PS: I'm planning on adding linting, sourcemaps, minification, evtl. cache busting and autoprefixer later on.

推薦答案

和 Ashwell 一樣，我發現使用導入來確保我的所有 LESS 文件都可以訪問他們需要的變量和 mixin 很有用.我還使用帶有導入的 LESS 文件來進行捆綁.這有幾個優點:

Like Ashwell, I've found it useful to use imports to ensure that all my LESS files have access to the variables and mixins that they need. I also use a LESS file with imports for bundling purposes. This has a few advantages:

1. 我可以利用 LESS 的功能來執行復雜的操作，例如覆蓋變量值以生成多個主題，或者為另一個 LESS 文件中的每個規則添加一個類.
2. 不需要 concat 插件.
3. Web Essentials for Visual Studio 等工具可以提供語法幫助和輸出預覽，因為每個 LESS 文件都完全能夠自行呈現.

如果你想導入變量、mixins等，但又不想實際輸出另一個文件的全部內容，你可以使用:

Where you want to import variables, mixins, etc, but you don't want to actually output the entire contents of another file, you can use:

@import (reference) "_colors.less";

經過幾天的努力，我終于能夠獲得一個增量構建，它可以正確地重建依賴于我更改的 LESS 文件的所有對象.我在這里記錄了結果.這是最終的 gulpfile:

After a few days of effort, I was finally able to get an incremental build that correctly rebuilds all the objects that depend on the LESS file I changed. I documented the results here. This is the final gulpfile:

/*
 * 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*@imports*(?:(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 文件一次，然后允許每個后續更改只構建依賴于已更改文件的那些文件.

We can now simply run gulp live to build all our LESS files once, and then allow each subsequent change to just build those files that depend on the changed files.

這篇關于增量 gulp 少構建的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！