Компиляция Bootstrap JS с Grunt. Отрегулируйте Gruntfile.js, чтобы следить за изменениями

Question

Создал новый простой проект Compass/Bootstrap с Yeoman. Файлы 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.

Из чего я могу понять, вы хотите, чтобы 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.