grunt使用

首先准备好node.JS npm。

执行 npm install -g grunt-cli 安装gurnt-cli

在项目目录(例如:d:\code\demo)下准备好package.json。描述好项目信息和依赖包。例如

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-jshint": "^0.11.3",
    "grunt-contrib-uglify": "^0.9.2"
  }
}

在项目根目录下(d:\code\demo)执行,安装项目依赖包到项目目录

npm install grunt --save-dev

npm install grunt-contrib-jshint --save-dev

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

grunt常用模块:
grunt-contrib-clean:删除文件。
grunt-contrib-compass:使用compass编译sass文件。
grunt-contrib-concat:合并文件。
grunt-contrib-copy:复制文件。
grunt-contrib-cssmin:压缩以及合并CSS文件。
grunt-contrib-imagemin:图像压缩模块。
grunt-contrib-jshint:检查JavaScript语法。
grunt-contrib-uglify:压缩以及合并JavaScript文件。
grunt-contrib-watch:监视文件变动,做出相应动作。

grunt-cache-breaker:自动计算文件MD5,在引用文件处把MD5作为版本号,从而实现缓存文件的自动刷新

注意:依赖包安装可以有两种方式,

1、编辑好package.json文件,直接在项目根目录下执行npm install.一次性安装所有插件

2、单个依赖包安装,依赖包信息会在执行的安装时会自动添加。


在项目根目录下准备好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: { <span style="font-family: Arial, Helvetica, sans-serif;">//压缩到目标目录</span>
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

在项目根目录执行grunt命令。执行构建

备注:我的grunt直接执行不了,需要环境变量path中添加C:\Users\myUser\AppData\Roaming\npm\grunt

grunt-contrib-uglify参数和使用

http://www.xv90.com/post-113.html

参考:

插件使用:http://www.cnblogs.com/hubcarl/p/4095122.html

安装:http://www.cnblogs.com/wangfupeng1988/p/4561993.html

http://ju.outofmemory.cn/entry/130809

http://ju.outofmemory.cn/entry/39815

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值