使用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陣列。