node.js - Grunt watch & LESS - 如何让它更快？ (仅编译已更改的文件)

Question

我有一个使用 LESS 和 grunt watch 来动态编译更改的基本应用程序。

很长一段时间以来，我一直在提示这样一个事实:当我更改任何 LESS 文件时，所有文件都会重新编译。无法只编译需要的内容真是浪费我的时间。但我希望它聪明，所以如果有任何导入，它也会编译受影响的文件，而不仅仅是被修改的文件。

今天我决定解决这个问题。这一点都不容易。 Grunt watch 不处理这个问题，即使使用 grunt-newer 也不起作用，在这两种情况下都需要编写自定义规则。

最后我没有使用https://github.com/tschaub/grunt-newer因为它不能很好地与 grunt-sync 配合使用，但更重要的是，因为它不符合我对 LESS 的需求，因为它无法处理 LESS 导入的内容，因此它不会编译相关文件，而只会编译那些已经改变了，它不“聪明”。

(可以对其进行自定义以考虑此类内容，并且人们在要点上提供了一些脚本，但没有任何官方存储库，因此很难找到您需要的内容，但绝对可以值得一看。)

<小时/>

这个问题已经被多次提出，但没有真正或简单的答案。请参阅:

How do you watch multiple files, but only run task on changed file, in Grunt.js?

Grunt watch: compile only one file not all

Grunt watch less on changed file only

Grunt: Watch multiple files, Compile only Changed

https://github.com/tschaub/grunt-newer/issues/29

https://gist.github.com/cgmartin/10328349

Answer 1

我的解决方案是一个自定义解决方案，特定于我的应用程序，但我希望它也可以用于您的应用程序!这非常简单。

假设您有一个 styles 文件夹，其中包含多个文件和目录(较少)，那么我的解决方案是定义一个文件夹白名单，我不会为其编译所有文件和目录较少的文件，但仅限于已更改的文件。

无 Grunt 配置: https://gist.github.com/Vadorequest/bd46bb4d6c326e837710

Grunt-watch 配置: https://gist.github.com/Vadorequest/b48bcfda2d0205ba3f95

文件夹架构:

到目前为止，处理此问题的“最简单”方法是覆盖 grunt.watch 事件，以检查更改的文件是否会影响其他文件。有多种方法，具体取决于您自己的架构。我的很简单，因为影响所有其他文件的文件要么位于 styles 文件夹的根目录中，要么位于子文件夹内。所以我“只是”必须检查文件的 filePath 是否属于白名单。如果是这样，那么我会动态更新 grunt 配置，更改属性 src 以仅匹配更改后的文件名。

grunt.event.on('watch', function(action, filePath, watchedTargetName) {
        switch(watchedTargetName){
            /*
            Compile only what is needed.
            Based on a white list of sub folders within the "styles" directory.
            White listed folders will not require to compile all LESS file, but only the changed ones.
            Others will require to compile everything.
             */
            case 'styles':
                // Root path from where the files are located.
                var rootPath = 'assets/linker/styles/';
                // Path of the file
                var filePathRelativeToRootPath = path.relative(rootPath, filePath);
                // Grunt task name (see less.js)
                var gruntTask = 'less';
                // Sub task to use.
                var subTaskName = 'dev';
                // List of folders that don't need to recompile everything.
                var whiteListFolders = [
                    'common',
                    'devices',
                    'layous',
                    'themes',
                    'views',
                ];

                if(action === 'changed'){
                    var isDir = path.dirname(filePath) !== '';
                    var dirName = filePathRelativeToRootPath.split(path.sep)[0];

                    // If the file is a directory and is belongs to the white list then we will override the grunt config on the fly to compile only that file.
                    if(isDir && _.contains(whiteListFolders, dirName)){
                        // We load the less config located at tasks/config/less.js
                        var config = grunt.config(gruntTask);

                        // Checks for any misconfiguration.
                        if(!config){
                            log.error('There is no config for the grunt task named ' + gruntTask);
                        }

                        if(!config[subTaskName]){
                            log.error('There is no sub task named ' + subTaskName + " for the the grunt task named " + gruntTask);
                        }

                        // Update the files.src to be the path to the modified file (relative to srcDir).
                        // Instead of updating all files, it will only update the one that has been changed.
                        config[subTaskName].files[0].src = filePathRelativeToRootPath;
                        grunt.config("less", config);
                        console.info('watcher LESS - The file ' + filePath + ' is in the white list and will be updated alone.');
                    }else{
                        console.info('watcher LESS - The file ' + filePath + ' is not is the white list, all LESS files will be updated.');
                    }
                }
                break;
        }
    } );

基本上，如果我更改 themes 目录中名为 ayolan.less 的文件，那么当我更新它时，内存中将设置的内容如下。 (参见https://gist.github.com/Vadorequest/b48bcfda2d0205ba3f95#file-watch-js-L80-L81)

{
    dev: {
        files: [{
            expand: true,
            cwd: 'assets/linker/styles/',
            src: 'themes/ayolan.less',// This has been changed in memory, for this specific watch event.
            dest: '.tmp/public/linker/styles/',
            ext: '.css'
        }]
    }
}

这允许我现在使用 http://www.browsersync.io/在我对 LESS 文件进行简单更改后大约 1 秒(大约 5 秒前)，它将更新浏览器，因为它必须编译所有 LESS 文件并复制它们。 (我还进行了其他性能更改，但这绝对有助于实现该目标!)