用Grunt编译Bootstrap JS。 调整Gruntfile.js以观察更改

Question

与Yeoman创建了一个新的简单Compass / Bootstrap项目。 SCSS文件运行正常，正在被编译为public / css / main.css。 我可以看到Gruntfile.js（如下）正在监视罗盘文件，而不是js文件。 我只希望Grunt将Bootstrap.js编译成public / js /。 尝试研究和更改文件，但我没有运气。

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    config: {
        app: 'app'
    },

    connect: {
        options: {
            port: 9000,
            livereload: 35729,
            // Change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        livereload: {
            options: {
                open: true,
                base: [
                    '.tmp',
                    '<%= config.app %>/public'
                ]
            }
        },
    },
    watch: {
        options: {
            livereload: true,
        },
        livereload: {
            options: {
                livereload: '<%= connect.options.livereload %>'
            },
            files: [
                '<%= config.app %>/public/{,*/}*.html',
                '<%= config.app %>/public/css/{,*/}*.css',
                '<%= config.app %>/public/images/{,*/}*'
            ]
        },

        compass: {
            files: ['**/*.{scss,sass}'],
            tasks: ['compass:dev']
        },
    },
    compass: {
        dev: {
            options: {
                sassDir: ['app/src/stylesheets'],
                cssDir: ['app/public/css'],
                environment: 'development'
            }
        },
        prod: {
            options: {
                sassDir: ['app/src/stylesheets'],
                cssDir: ['app/public/css'],
                environment: 'production'
            }
        },
    }
});

// Load the plugin
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-connect');

// Additional
grunt.loadNpmTasks('grunt-serve');

// Default task(s).
//grunt.registerTask('default', ['connect:livereload', 'compass:dev', 'watch']);
grunt.registerTask('serve', ['connect:livereload', 'compass:dev', 'watch']);

// prod build
grunt.registerTask('prod', ['compass:prod']);

};

确定这就像一些Grunt枪一样简单吗？

Answer 1

由于指南针任务正在将它们编译为CSS，因此SCSS文件工作正常。

据我了解，您希望Grunt将js文件（包括bootstrap.js）编译到public / js目录中。 为此，您必须使用grunt concat 。

首先，在根目录中运行npm install grunt-contrib-concat --save-dev 。

然后更新Gruntfile：

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    config: {
        app: 'app'
    },

    connect: {
        options: {
            port: 9000,
            livereload: 35729,
            // Change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        livereload: {
            options: {
                open: true,
                base: [
                    '.tmp',
                    '<%= config.app %>/public'
                ]
            }
        },
    },
    // Edited: Add concat task
    concat: {
        options: {
            separator: ';',
        },
        dist: {
            src: ['app/src/javascripts/bootstrap.js'],
            dest: 'app/public/js/app.js',
        },
    },
    watch: {
        options: {
            livereload: true,
        },
        livereload: {
            options: {
                livereload: '<%= connect.options.livereload %>'
            },
            files: [
                '<%= config.app %>/public/{,*/}*.html',
                '<%= config.app %>/public/css/{,*/}*.css',
                '<%= config.app %>/public/images/{,*/}*'
            ]
        },
        compass: {
            files: ['**/*.{scss,sass}'],
            tasks: ['compass:dev']
        },
        // Edited: Watch js files
        js: {
            files: ['app/src/javascripts/**/*.js'],
            tasks: ['concat'],
        },
    },
    compass: {
        dev: {
            options: {
                sassDir: ['app/src/stylesheets'],
                cssDir: ['app/public/css'],
                environment: 'development'
            }
        },
        prod: {
            options: {
                sassDir: ['app/src/stylesheets'],
                cssDir: ['app/public/css'],
                environment: 'production'
            }
        },
    }
});

// Load the plugin
grunt.loadNpmTasks('grunt-contrib-watch');
// Edited: Load grunt-contrib-concat
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-connect');

// Default task(s).
// Edited: Add concat
grunt.registerTask('default', ['connect:livereload', 'compass:dev', 'concat', 'watch']);
// prod build
// Edited: Add concat
grunt.registerTask('prod', ['compass:prod'], 'concat');

};

我建议不要直接更新bootstrap.js文件。 在同一目录中创建一个新脚本，并将其名称添加到concat > dist > src数组中。