前端构建工具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 指令。