用 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

SCSS 文件工作正常，因为 compass 任务正在将它们编译为 CSS.

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

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

然后更新G运行t文件：

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 数组。

用 Grunt 编译 Bootstrap JS。调整 Gruntfile.js 以观察变化

Compile Bootstrap JS with Grunt. Adjust Gruntfile.js to watch for changes

twitter-bootstrap

gruntjs

grunt-contrib-watch