Grunt：我如何为 CSS（sass、concat、minify）和 JS（concat、minify）运行单独的进程

Question

我正在查看 grunt watch 文档，但我可以看到如何为我的 javascript 文件运行单独的进程。下面是我的 CSS：

GruntFile.js

module.exports = function(grunt) {
    grunt.initConfig({
        // running `grunt sass` will compile once
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: {
                    './public/css/sass_styles.css': './src/sass/sass_styles.scss' // 'destination': 'source'
                }
            }
        },
        // bring in additonal files that are not part of the sass styles set
        concat: {
            dist: {
                src: [
                    'public/css/datepicker.css', 
                    'public/css/jquery.tagsinput.css', 
                    'public/css/sass_styles.css', 
                    'application/themes/japantravel/style.css'
                ],
                dest: 'public/css/all.css',
            },
        },
        // running `grunt cssmin` will minify code to *.min.css file(s)
        cssmin: {
            minify: {                                 
                expand: true,
                cwd: "public/css/",
                src: ["all.css", "!*.min.css"],
                dest: "public/css/",
                ext: ".min.css"
            }
        },
        // running `grunt watch` will watch for changes
        watch: {
            files: ["./src/sass/*.scss", "./src/sass/partials/*.scss"],
            tasks: ["sass", "concat", "cssmin"]
        }
    });

    // load tasks
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks("grunt-contrib-watch");
};

如您所见，我有 CSS ["sass"、"concat"、"cssmin"] 的任务，但我想为单独的文件 (js) 执行单独的任务 - concat 和 minify - 并监听更改（观看)。有人可以指出我正确的方向吗，我不确定我应该寻找什么。这是手表可以处理的东西，还是有其他插件？我对 grunt 有点陌生，所以仍在试图弄清楚如何使用它。谢谢

Answer 1

你可以使用'grunt-concurrent'，你可以用它定义多个任务。结合手表套装，您将获得适当的解决方案。 https://github.com/sindresorhus/grunt-concurrent

# to install:
npm install grunt-concurrent --save-dev

这将是您调整后的功能。 请记住，您仍然需要设置一些 uglify 和 jshint 属性！但我相信这不是这里的问题。

module.exports = function(grunt) {
    grunt.initConfig({

        /* .. */

        // running `grunt watch` will watch for changes
        watch: {
            // Use 'sets' like this, just make up a name for it:
            watchCss: {
                files: ["./src/sass/*.scss", "./src/sass/partials/*.scss"], // Directory to look for changes
                tasks: ["concurrent:taskCss"] // Tasks you want to run when CSS changes
            },
            watchJs: {
                files: ["./src/js/**/*.js"], // Directory to look for changes
                tasks: ["concurrent:taskJs"] // Tasks you want to run when JS changes
            }
        },
        concurrent: {
            taskCss: ["sass", "concat", "cssmin"],  // define the CSS tasks here
            taskJs:  ["jshint", "concat", "uglify"] // define the JS tasks here
        },
    });

    // load tasks
    grunt.loadNpmTasks("grunt-contrib-sass");
    grunt.loadNpmTasks("grunt-contrib-concat");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks('grunt-contrib-jshint'); // Added
    grunt.loadNpmTasks('grunt-contrib-uglify'); // Added
    grunt.loadNpmTasks("grunt-concurrent"); // Added

    // register tasks (note: you can execute sets from concurrent)
    grunt.registerTask('default', ["concurrent:taskCss", "concurrent:taskJs"]);
    grunt.registerTask('css', ["concurrent:taskCss"]);
    grunt.registerTask('js', ["concurrent:taskJs"]);
};

观察变化：

grunt watch
# if a css file is changed, only the css tasks are performed

你也可以直接在提示下执行任务，例如：

grunt js
# This will only execute the registered task 'js'
# In this case that task points to 'concurrent:taskJs' wich will run jshint, concat and uglify

要安装 uglify 和 jshint： https://github.com/gruntjs/grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-jshint

npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-jshint --save-dev