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.

谢谢

Answer 1

你可以使用 grunt.option。

您的 grunt register 任务将如下所示。

> 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'

Answer 2

我最终能够像这样完成我想要的，但不确定这是否是标准方式。

我没有做的是首先全局声明 globalConfig 变量，这样我就可以在运行 grunt 任务时从终端重新定义它。

这是一个例子。处理 HTML 电子邮件时，我需要：

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

关键是，如果我在同一个项目中处理多个不同的 HTMl 电子邮件，我需要能够根据需要在 html 文件上一个接一个地运行所有这些任务。下面的 Gruntfile 允许我这样做。

这是做什么的：

如果你进入终端 grunt 它将简单地运行 sass 任务，该任务处理所有 sass 文件 - 终端不需要文件参数。

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

您会注意到，唯一需要文件名的任务实际上是 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。