grunt 安装使用（一）

grunt 依赖nodejs,全部在使用前确保你安装了nodejs,而后开始执行grunt命令。

1.安装node

nodejs安装教程

安装完成后在命令行，执行命令：

node  -v 

出现版本信息，说明安装完成.NPM是随同nodejs一块儿安装的包管理工具，能解决nodejs代码部署上的不少问题：

• 容许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。

 

2.grunt命令行（CLI）安装在全局环境下

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，通常用于：
① 压缩文件
② 合并文件
③ 简单语法检查

对于已安装低版本，要更新最新版本须要先卸载，进行安装：

npm uninstall -g grunt

为了方便在全局安装grunt命令接口（CLI）

> npm install -g grunt-cli

该命令植入到你的系统中，容许从任意目录运行Grunt

 

3.建立目录

在本地建立项目目录：grunt_test1

 

建立完成，添加package.json文件 ，也能够手动生成一个文件（npm init）

    

命令行执行：

   cnpm install grunt --save-dev 

在当前目录下安装grunt依赖。 tips:淘宝npm镜像安装：

执行后就可使用cnpm 代替npm$ npm install -g cnpm --registry=https://registry.npm.taobao.org

   cnpm install grunt --save-dev  执行以后，就会看到 
node_modules模块加载 及 package.json 依赖模块会存在

 

4.插件安装

官网插件地址

这里的插件有官方及第三方提供插件，区分方式 grunt-contrib 是官方标注

 

• Contrib-jshint——javascript语法错误检查；

• Contrib-htmlmin ——压缩html代码
• Contrib-cssmin—— 压缩css代码
• Contrib-imagemin——压缩图片

• Contrib-watch——实时监控文件变化、调用相应的任务从新执行；

• Contrib-clean——清空文件、文件夹；

• Contrib-uglify——压缩javascript代码

• Contrib-copy——复制文件、文件夹

• Contrib-concat——合并多个文件的代码到一个文件中

• karma——前端自动化测试工具

 

先看 JS 批量压缩， 安装插件Contrib-uglify

   cnpm install grunt-contrib-uglify --save-dev

 

会看到该插件依赖。 同时在该目录下建立文件

Gruntfile.js

这个文件尤为关键，他通常干两件事情：
① 读取package信息
② 插件加载、注册任务，运行任务（grunt对外的接口所有写在这里面）

Gruntfile通常由四个部分组成
① 包装函数
这个包装函数没什么东西，意思就是咱们全部的代码必须放到这个函数里面

module.exports = function (grunt) {
//你的代码
}

这个不用知道为何，直接将代码放入便可

② 项目/任务配置
咱们在Gruntfile通常第一个用到的就是initConfig方法配置依赖信息

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

这里的 grunt.file.readJSON就会将咱们的配置文件读出，而且转换为json对象

而后咱们在后面的地方就能够采用pkg.XXX的方式访问其中的数据了

以上描述--抄袭的，我比较懒-直接拿过用

 

grunt.loadNpmTasks('xxx'); 加载模块

grunt.registerTask('default', ['xxx']);默认执行任务

看看实例：

Gruntfile.js

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify:{
      js:{
        files:[{
          expand: true,
          cwd: 'src/js',
          src: '**/*.js',
          dest: 'dist/js'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

 

• expand：若是设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
• cwd：须要处理的文件（input）所在的目录。
• src：表示须要处理的文件。若是采用数组形式，数组的每一项就是一个文件名，可使用通配符。
• dest：表示处理后的文件名或所在目录。
• ext：表示处理后的文件后缀名。

 

grunt.initConfig：定义各类模块的参数，每个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务须要依次使用的模块。

 

项目目录建立src文件夹，里边有js文件夹, js文件夹下有两个js文件。

 

 

执行命令： grunt

 

看到由原来9.72kb ---压缩到--->5.8kb，同时生产一个压缩目录：

 

 

css,html,img压缩原理都是同样的。针对每一个文件一 一 压缩。

'use strict';  
module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
      uglify:{
      js:{
        files:[{
          expand: true,
              cwd: 'src/js',
              src: '**/*.js',
              dest: 'dist/js'
        }]
      }
    },  

    cssmin:{
        // 去除html注释
      options: {
        collapseWhitespace: true,
          conservativeCollapse: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true
      },
      css:{
        files:[{
          expand: true,
              cwd: 'src/css',
              src: '**/*.css',
              dest: 'dist/css'
        }]
      }
    },
    htmlmin:{
      options: {
        removeComments: true,
        removeCommentsFromCDATA: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true   
      },
      html:{
         files:[{
          expand: true,
              cwd: 'src/html',
              src: ['**/*.html'],
              dest: 'dist/html'
        }]
      }
    },
    imagemin: { 
      dist:{
        options: {
          optimizationLevel: 3 // 定义 PNG 图片优化水平
        },
     
      files:[{
        expand: true, 
        cwd: 'src/img/',
        src: ['**/*.{png,jpg,jpeg}'], 
        dest:'dist/img/'
      }]
     }
    }
           

 
    
  });
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-htmlmin');
   grunt.loadNpmTasks('grunt-contrib-imagemin');  
 
  // 默认任务
  grunt.registerTask('default', ['uglify','cssmin','htmlmin', 'imagemin']);
  // grunt.registerTask('default', ['imagemin']);

 //   grunt.registerTask('minall', ['uglify:buildall']);
}

View Code

 

建立一个任务起个别名：

  // common task.
  grunt.registerTask('build-file', 'build file', function() { 
   grunt.task.run('htmlmin:html');
  });


  // 默认被执行的任务列表。
  grunt.registerTask('default', ['build-file']);
   
  // 与下边效果同样

　　// grunt.registerTask('default', ['htmlmin:html']);

};