grunt系列启动grunt项目

66 阅读 0 评论 44 点赞

我是靠谱客的博主含蓄大地，最近开发中收集的这篇文章主要介绍grunt系列启动grunt项目，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

启动grunt project：

1、已经存在的grunt project

假设grunt CLI已经安装了，项目里面已经有package.json和Gruntfile，启动很简单：

到项目的根目录
安装项目依赖：

npm install

启动grunt

grunt

2、一个新的grunt project

增加两个文件到你的项目里面：

package.json

你会在这个文件里面列出项目需要的grunt和grunt plugins：

{
    "name" : "***",
    "version" : "*.*.*",
    "devDependencies" : {
            "grunt" : "~0.4.0",
            "grunt-contrib-jshint" : "~0.1.1",
            "grunt-contrib-uglify" : "~0.1.2",
            "grunt-contrib-concat" : "~0.1.1"
    }
}

package.json文件放在项目的根目录下，和Gruntfile同级

在根目录下执行：npm install，package.json里面定义的依赖版本会正确的加载！

在你的项目里面有几种方式去创建package.json

//大部分的grunt-init templates会自动的创建一个项目特有的package.json文件

//会创建一个基本的package.json文件
npm init 

可以以下面例子开始，如果需要的话可以扩展

{
    "name" : "my-project-name",
    "version" : "0.1.0",
    "devDependencies" : {
         "grunt" : "~0.4.1",
         "grunt-contrib-jshint" : "~0.1.1",
         "grunt-contrib-nodeunit" : "~0.1.2"
    }
}

Gruntfile

这个文件命名成：Gruntfile.js 或者 Gruntfile.coffee

它是用来配置和定义任务的，同时加载grunt plugins

注释：在0.3.x version的时候，它叫做：grunt.js

一个gruntfile由以下部分组成：

"wrapper" function

module.exports = function(grunt){
    //在这里面加入相关的任务代码
}

项目和任务配置
加载grunt plugins和任务
自定义任务

注：参数grunt

module.exports = function(grunt){
    
      grunt.initConfig({
           pkg: grunt.file.readJSON('package.json'),
           uglify: {
                options: {
                     banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n',
                },
                build: {
                    src: 'src/<%= pkg.name %>.js',
                    dest: 'build/<%= pkg.name %>.min.js'
               }
           } 
      });

      //加载支持uglify任务的插件
      grunt.loadNpmTasks('grunt-contrib-uglify');

      //默认的任务
      grunt.registerTask('default',['uglify']);
 
};