前端構建工具Grunt的使用

 

 

Grunt和所有grunt插件都是基於nodejs來運行的。使用前需安裝node.js。

第一步：全局安裝Grunt。

npm install -g grunt-cli

第二步：創建項目

在【package.json】文件中添加一些東西

{
  "name": "project",
  "version": "0.1.0",
  "devDependencies": {
  }
}

第三步：在項目中安裝grunt及grunt插件

npm install grunt --save-dev

npm install grunt-contrib-jshint --save-dev

grunt插件添加成功後可在【package.json】中查看

【Gruntflie.js】文件中添加配置

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加載包含 "uglify" 任務的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默認被執行的任務列表。
  grunt.registerTask('default', ['uglify']);

};

第四步： 運行

在命令行中運行 grunt 指令，uglify任務將被執行，並在相應目錄中輸出結果

第五步：實現自動化

grunt插件安裝配置完成後，每次執行都需要運行 grunt 指令。可以同過安裝 watch 插件，來對相應的任務進行實時監測。

安裝成功後在【Gruntflie.js】文件中添加配置

    watch:{
            build:{
                files:['src/js/*.js','src/css/*.css'],
                tasks:['jshint','csslint','cssmin','concat','uglify'],
                options:{
                    spawn:false,
                },
            },
        },

    grunt.loadNpmTasks('grunt-contrib-watch');
 
    grunt.registerTask('default',['csslint','cssmin','jshint','concat','uglify','watch']);

當運行 grunt 指令後，watch 開始監聽，自動執行相應的任務。不需要每次修改文件後都運行 grunt 指令。