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的任务[＆＃34; sass＆＃34;，＆＃34; concat＆＃34;，＆＃34; cssmin＆＃34;]，但我想分开执行单独的任务files（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

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

1 个答案: