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镜像安装：

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

   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']);

};

posted on 2017-07-19 13:30 Mc525 阅读(749) 评论(0) 编辑收藏举报

刷新页面返回顶部

SeaJson

grunt 安装使用（一）

Gruntfile.js

导航

公告