Grunt 初体验

 

Grunt: JavaScript世界的构建工具 -- Grunt中文网

 

下载 安装 Node.js

淘宝 NPM 镜像

下载 安装 Git

 

 

执行命令：

npm install grunt --save-dev

表示通过 npm 安装了 grunt 到当前项目，同时加上了 –save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。

 

安装 Grunt 的插件：

• 合并文件：grunt-contrib-concat
• 语法检查：grunt-contrib-jshint
• Scss 编译：grunt-contrib-sass
• 压缩文件：grunt-contrib-uglify
• 监听文件变动：grunt-contrib-watch
• 建立本地服务器：grunt-contrib-connect

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

 

 

配置 Gruntfile.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']);

};

 

报错：

-bash: grunt: command not found 

解决方法：

全局安装 Grunt

npm install -g grunt-cli

 

 

 

资料：

配置grunt进行css、js的检查、合并和压缩