使用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']); 

};

当然这和一些咕噜枪一样简单？

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>dist>src阵列。