码迷,mamicode.com
首页 > 其他好文 > 详细

grunt安装配置

时间:2015-06-23 15:07:47      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

1、安装nodeJs环境(包含npm)
2、$ npm install -g grunt-cli //可调用与Gruntfile在同一目录中的Grunt版本
3-1、$ npm install -g grunt-init 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件
 
C:\Users\***\AppData\Roaming\npm\node_modules\grunt-init
 
     {
  "name": "main",//文件名
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  }
}
3-3、根据需要做扩充
     $ npm install grunt --save-dev
//向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。
此命令不光安装了<module>,还会自动将其添加到devDependencies 配置段中,
eg:$ npm install grunt-contrib-uglify;
 
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  }
 
4、添加Gruntfile.js文件
module.exports = function(grunt){
 
    // 项目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        uglify: {//grunt-contrib-uglify 插件的同名属性
            options: {
                banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
               //用于在文件顶部生成一个注释
            },
            build: {//用于将一个js文件压缩为一个目标文件。
                src: ‘src/<%=pkg.name %>.js‘,
                dest: ‘build/<%= pkg.name %>.min.js‘
            }
        }
    });
    //只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:
    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
 
//自定义任务
    // 默认任务
    grunt.registerTask(‘default‘, [‘uglify‘]);或者
    grunt.registerTask(‘default‘, ‘Log some stuff.‘, function() { grunt.log.write(‘Logging some stuff...‘).ok(); });
    特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中,并通过grunt.loadTasks方法加载。
}
 
5、$ grunt

grunt安装配置

标签:

原文地址:http://www.cnblogs.com/uh-huh/p/4595452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!