grunt构建一个项目

准备工作：grunt基于node环境运行，所有先安装node.js

1.安装grunt，通过node的npm的包管理工具

　>npm install grunt --save-dev

2.npm init在项目中引导创建一个package.json文件

>npm init

3.新建一个Gruntfile的js文件，主要是写入grunt的配置

module.exprots = function(grunt){

grunt.initConfig({此处写配置的信息})

}

 4.几个常用的插件

   (1)less监听

>npm install grunt-contrib-less --save-dev

a.配置信息：

less:{development: {files: {'public/css/home/home.css': 'public/css/home/home.less'}}}

b.注册信息：

grunt.loadNpmTasks('grunt-contrib-less')

c.运行：

>grunt less

   (2)watch监听

>npm install grunt-contrib-watch --save-dev

a.配置信息：

watch:{css: {files: [ 'public/css/home/home.less'],tasks:['less'],options:{livereload:true}}}

b.注册信息：

grunt.loadNpmTasks('grunt-contrib-watch')

c.运行：

>grunt watch

   (3)浏览器同步测试工具

>npm install browser-sync --save-dev

a.配置信息：

不需要配置信息

b.注册信息：

不需要注册信息

c.运行：

>browser-sync start --server --file "*.html"

   (4)css压缩

>npm install grunt-contrib-cssmin --save-dev

a.配置信息：

cssmin: {
     target: {
         files: [{
             expand: true,
             cwd: 'public/css/home', //需要压缩的css路径
             src: ['*.css', '!*.min.css'], //需要压缩的css
             dest: 'build/css/home', //压缩之后的路径
             ext: '.min.css' //压缩之后的css后缀名
         }]
     }
}

b.注册信息：

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

c.运行：

>grunt cssmin

   (5)js合并压缩

>npm install grunt-contrib-uglify --save-dev

a.配置信息：

uglify: {
      my_target: {
          files: {
              'build/js/home/home.min.js': ['public/js/home/home1.js', 'public/js/home/home2.js']
          }
     }
}

b.注册信息：

grunt.loadNpmTasks('grunt-contrib-uglify')

c.运行：

>grunt uglify

   (6)合并css和js

>npm install grunt-contrib-concat --save-dev

a.配置信息：

concat:{
      js:{
          files:{
              'build/js/home/concat.js':['public/js/home/*.js']
          }
      },
      css:{
          files:{
              'build/css/home/concat.css':['public/css/home/*.css']
          }
      }
  }

b.注册信息：

grunt.loadNpmTasks('grunt-contrib-concat')

c.运行：

>grunt concat

   (7)css精灵

>npm install grunt-spritesmith --save-dev

a.配置信息：

sprite:{
      all:{
          src:["public/img/*.png","public/img/*.jpg"], //需要整理的图片
          dest:"build/img/spriteRes.png", //生成一张图片的名称
          destCss:"build/css/spriteRes.css" //生成css的路径和文件名
      }
}

b.注册信息：

grunt.loadNpmTasks('grunt-spritesmith')

c.运行：

>grunt sprite

   (8)图片压缩

>npm install grunt-contrib-imagemin --save-dev

a.配置信息：

imagemin:{
      release:{
          files:[{
              expand:true,
              src:['build/img/spriteRes.png']
          }],
          options:{
              optimizationLevel:3
          }
      }
}

b.注册信息：

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

c.运行：

>grunt imagemin

   (9)注册多任务执行

　　grunt.registerTask('default', ['uglify', 'cssmin', 'concat', 'imagemin']);