grunt配置安装

注意两点。第一，grunt依赖于nodejs的v0.8.0及以上版本；第二，奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版。

一.安装grunt-CLI

npm install -g grunt-cli

二.新建文件夹

新建Gruntfile.js//配置文件

新建Package.json 内容如下

{

    "name": "grunt",//名称

     "version": "0.1.0",//版本

     "description": "grunt",

     "license": "MIT",

     "devDependencies": {//开发依赖

          "grunt": "~0.4.1",

          "grunt-contrib-clean": "~0.5.0",

          "grunt-contrib-concat": "~0.3.0",

          "grunt-contrib-copy": "~0.4.1",

          "grunt-contrib-cssmin": "^2.0.0",

          "grunt-contrib-htmlmin": "^2.4.0",

          "grunt-contrib-imagemin": "^1.0.1",

          "grunt-contrib-jshint": "~0.6.3",

          "grunt-contrib-requirejs": "~0.4.1",

          "grunt-contrib-uglify": "~0.2.1",

          "grunt-strip": "~0.2.1",

          "grunt-usemin": "^3.1.1"

     },

     "dependencies": {

          "express": "3.x"

    }

}

npm install 

Gruntfile.js内容如下

module.exports = function(grunt) {

  // 项目配置

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    //清除文件

    clean: {

        cleanoutput: {

        files: [{

          src: ['dest\n'

        },

        buildall: { //按原文件结构压缩js文件夹内所有JS文件

          files: [{

            expand: true,

                cwd: 'js', //js目录下

                src: ['***.css', //所有css文件

          dest: 'dest/css', //输出到此目录

        }]

     }

   },

     htmlmin: {

      options: {

          removeComments: true,//注释

          // removeCommentsFromCDATA: true,

          // collapseWhitespace: true,//折叠空格

          // collapseBooleanAttributes: true,

          // removeAttributeQuotes: true,//删除属性引号

          // removeRedundantAttributes: true,//删除冗余属性

          // useShortDoctype: true,//使用短文档类型

          // removeEmptyAttributes: true,//移除空属性

           // removeOptionalTags: true

        },

    build: {

          expand: true,

          //cwd: './',

          //src: ['*.html'],

  cwd: 'html',

          src: ['***.{png,jpg,jpeg,gif}'],

        dest: 'dest/images/'

      }]

    }

  },

    // 处理html中css、js 引入合并问题

    usemin: {

       html: 'dest/*.html'

    }

  });

  grunt.loadNpmTasks('grunt-contrib-uglify');//引用插件

  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.loadNpmTasks('grunt-contrib-imagemin');

  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.loadNpmTasks('grunt-contrib-copy');

  grunt.loadNpmTasks('grunt-contrib-htmlmin');

  grunt.loadNpmTasks('grunt-usemin');

  // 默认任务

  // grunt.registerTask('default', ['uglify']);

  grunt.registerTask('minall', ['uglify:buildall']); //修改别名

  grunt.registerTask('mincss', ['cssmin:buildall']);

  grunt.registerTask('minimg', ['imagemin:buildall']);

  grunt.registerTask('usemin', ['usemin:buildall']);

  grunt.registerTask('minhtml', ['htmlmin:build']);

  //默认统一全部处理

  grunt.registerTask('default', ['copy','clean', 'minhtml','minall','cssmin','imagemin']);

}

最后 执行命令 grunt

GRUNT 插件

js语法检查:grunt-contrib-jshint
安装命令：npm install grunt-contrib-jshint --save-dev 下同
css语法检查：grunt-contrib-csslint
合并文件：grunt-contrib-concat
js压缩文件：grunt-contrib-uglify
css压缩文件：grunt-contrib-cssmin
image压缩文件：grunt-contrib-imagemin
html压缩文件：grunt-contrib-htmlmin
Sass\Scss 编译：grunt-contrib-sass
安装sass插件后，我运行grunt，发现报错，提示ruby没有安装，所以如果需要使用到这个插件的，要确保自己的电脑上是否有装ruby，没有的话要进行安装
sudo yum install ruby # CentOS, Fedora, 或 RHEL 系统
sudo apt-get install ruby-full # Debian 或 Ubuntu 系统
brew install ruby #苹果系统
Less 编译：grunt-contrib-less
监听文件变动：grunt-contrib-watch