Grunt：我如何为 CSS 和 JS 运行单独的进程答案

【问题标题】：Grunt: How do I run seperate processes for CSS and JSGrunt：我如何为 CSS 和 JS 运行单独的进程
【发布时间】：2016-09-27 11:36:25
【问题描述】：

如您所见，我有 CSS ['sass:main'] 和 JS ['jshint:main', 'concat:main', 'uglify:main'] 的任务，但我想为单独的文件（JS 和 CSS）并监听变化（watch）。有人可以指出我正确的方向吗，我不确定我应该寻找什么。这是手表可以处理的东西，还是有其他插件？我对 grunt 有点陌生，所以仍在试图弄清楚如何使用它。谢谢

GruntFile.js：

module.exports = function(grunt) {
    var config = {
        pkg: grunt.file.readJSON('package.json'),
        jshint: {
            options: {
                globals: {
                    jQuery: true,
                    console: true,
                    module: true,
                    document: true
                }
            },  
            main: {
                src: [
                    'assets/templates/main/js/crm/*.js',
                ]
            }
        },
        concat: {
            options: {
                separator: '\n\n'
            },
            main: {
                src: [
                    'assets/templates/main/js/crm/*.js',
                ],
                dest: 'assets/templates/main/js/crm.min.js'
            }
        },
        sass: {
            options: {
                style: 'compressed'
            },
            main: {
                files: {
                    'assets/templates/main/css/main.min.css': 'assets/templates/main/sass/main.scss',
                }
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            main: {
                src: 'assets/templates/main/js/crm.min.js',
                dest: 'assets/templates/main/js/crm.min.js'
            }
        },
        watch: {
            mainjs: {
                files: ['assets/templates/main/js/crm/*.js'],
                tasks: ['jshint:main', 'concat:main', 'uglify:main'],
            },
            mainsass: {
                files: ['assets/templates/main/sass/*.scss''],
                tasks: ['sass:main'],
            }
        },
        concurrent: {
            maincss: ['sass:main'],
            mainjs:  ['jshint:main', 'concat:main', 'uglify:main']
        }
    };

    grunt.initConfig(config);

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-concurrent');

    grunt.registerTask('main', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main']);
    grunt.registerTask('main-watch', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main', 'concurrent:mainsass']);
};

当我尝试运行任务时：

$ grunt main-watch
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Invalid or unexpected token
Warning: Task "main-watch" not found. Use --force to continue.

Aborted due to warnings.

【问题讨论】：

标签： gruntjs grunt-contrib-watch grunt-concurrent

【解决方案1】：

听起来您想同时执行两个监视任务。你可以使用这样的配置来做到这一点：

    ...

    concurrent: {
        options: { logConcurrentOutput: true },
        watch: ['watch:mainjs', 'watch:mainsass']
    }
};

...

grunt.registerTask('main-watch', ['concurrent:watch']);

注意logConcurrentOutput默认为false，所以如果你想看到输出到控制台，你需要将它设置为true。

【讨论】：