Question

与Yeoman一起创建了一个新的简单Compass / Bootstrap项目。 SCSS文件工作正常＆amp;正在编译成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文件正常运行，因为指南针任务正在将它们编译为CSS。

根据我的理解，您希望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＆gt; dist＆gt; src数组中。

使用Grunt编译Bootstrap JS。调整Gruntfile.js以监视更改

1 个答案: