Grunt - 如何从命令行传递文件名变量

Question

我很难理解如何从grunt命令行传递部分文件名，以便在特定文件上运行任务（来自已安装的grunt模块）。

我想要做的是配置一系列任务，以从命令行获取文件名参数。

我尝试重新制作了这个页面http://chrisawren.com/posts/Advanced-Grunt-tooling上的最终示例，但我有点盲目。希望有人能快速回答。

这是我的Gruntfile：

module.exports = function (grunt) {
    grunt.initConfig({
      globalConfig: globalConfig,

        uglify: {
          js: {
            options: {
              mangle: true
            },
            files: {
              'js/<%= globalConfig.file %>.min.js': ['js/<%= globalConfig.file %>.js']
            }
          }
        },



    });

    // Load tasks so we can use them



    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('go', 'Runs a task on a specified file', function (fileName){
      globalConfig.file = fileName;
      grunt.task.run('uglify:js');
    });
};

我尝试像这样从命令行运行它：

grunt go:app

目标为js/app.js

我收到了这个错误：

Aborted due to warnings.
roberts-mbp:150212 - Grunt Tasks robthwaites$ grunt go:app
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: globalConfig is not defined
Warning: Task "go:app" not found. Use --force to continue.

谢谢

- spacewindow

Answer 1

你可以使用grunt.option。

你的grunt注册任务将看起来像这样。

> grunt.option('fileName'); grunt.registerTask('go', 'Runs a task on a
> specified file', function (){     
>       grunt.task.run('uglify:js');
>     });

你的grunt配置将是：

module.exports = function (grunt) {
 var fileName=grunt.option('fileName');
    grunt.initConfig({
        uglify: {
          js: {
            options: {
              mangle: true
            },
            files: {
              'js/fileName.min.js': ['js/fileName.js']
            }
          }
        },   
    });

在终端中运行任务的命令：

$ grunt go --fileName='xyzfile'

- Trupti M Panchal

---

嗨，我找到了一个稍微更简单的语法解决方案，至少可以在终端中运行命令。你对此有什么看法吗？无论如何，这是另一种解决方案。 - spacewindow

Answer 2

最终，我通过以下方式实现了我想要的目标，但不确定这是否是标准方法。

我一开始未能在全局范围内声明globalConfig变量，因此无法在运行grunt任务时从终端重新定义它。

以下是一个示例。在处理HTML电子邮件时，我需要：

1. 将我的sass文件处理为css（grunt-contrib-sass） 2. 在生成的css上运行autoprefixer（grunt-autoprefixer） 3. 压缩我的CSS并删除CSS注释（grunt-contrib-cssmin） 4. 在html文件的标签中包含我的完整CSS（使用grunt-include-replace） 5. 最后，对文件运行premailer以内联所有样式（grunt-premailer）

重点是，如果我在同一项目中处理多个不同的HTMl电子邮件，则需要能够逐个运行所有这些任务。下面的Gruntfile允许我这样做。

这是它的作用：

如果您在终端中输入grunt，它将仅运行sass任务，该任务处理所有sass文件-无需从终端传递文件参数。

然而，如果我希望在单个HTML文件上运行一系列进程，我会输入grunt process:fileName，其中fileName是不带.html扩展名的HTML文件名。

您会注意到，唯一需要fileName的任务实际上是include-replace和premailer。然而，在针对所选文件之前，我仍然希望运行所有其他CSS清理任务。

关键是：

1. 声明全局变量
2. 将globalConfig变量加载到grunt.initConfig中
3. 在任务中需要时使用grunt变量声明
4. 注册自定义任务，并使用fileName变量作为参数。

希望能帮助到某些人。

module.exports = function (grunt) {

    var globalConfig = {
        file: 'index' // this is the default value, for a single project.
    }

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        // load the globalConfig variables

        globalConfig: globalConfig,

    sass: {
        dev: {
            files: [{
                expand: true,
                cwd: 'scss',
                src: ['*.scss'],
                dest: 'css',
                ext: '.css'
    }]
        }
    },

    cssmin: {
        options: {
            keepSpecialComments: 0,
            keepBreaks: true,
            advanced: false
        },
        target: {
            files: [{
                expand: true,
                cwd: 'css',
                src: '*.css',
                dest: 'css',
                ext: '.css'
    }]
        }
    },

    autoprefixer: {
        css: {
            src: "css/*.css"
        }
    },

    includereplace: {
        your_target: {
            options: {
                prefix: '\\/\\* ',
                suffix: ' \\*\\/',
            },
            files: {
                'inline/<%= globalConfig.file %>-inline.html': ['<%= globalConfig.file %>.html']
            }
        }
    },

    premailer: {
        main: {
            options: {
                verbose: true,
                preserveStyles: true,
            },
            src: 'inline/<%= globalConfig.file %>-inline.html',
            dest: 'inline/<%= globalConfig.file %>-inline.html'
        }
    },


});


grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-include-replace');
grunt.loadNpmTasks('grunt-premailer');

grunt.registerTask('default', 'sass');

grunt.registerTask('process', 'Runs all processing tasks on a specific file to produce inlined file', function (fileName) {
    globalConfig.file = fileName;
    grunt.task.run('sass', 'autoprefixer', 'cssmin', 'includereplace', 'premailer');
});

}

编辑： 显然目前它只接受一个参数。在其他用例中，上面的grunt.option版本可能会提供更多功能，能够在一个命令中提交多个参数。如果我发现需要这样做，我将继续尝试使用grunt.option。

- spacewindow