zoukankan      html  css  js  c++  java
  • grunt 上手

    grunt 上手

    开始上手

    Grunt 和 grunt 插件都是通过 npm 安装, Node.js 包管理器管理的。

    Grunt 0.4.x 版本需要Node.js 版本号不低于0.8.0。

    一.安装CLI

    为了顺利开始,你将需要全局安装Grunt命令行界面CLI。你可能需要使用sudo(for OSX, *nix, BSD etc)或者作为一个管理员运行你的命令行。

    npm install -g grunt-cli

    这样呢,就可以把grunt命令放到系统路径,允许你在任何目录运行。

    注意,安装grunt-cli 并不是安装了grunt 任务运行器。 grunt CLI的职责很简单:运行grunt版本(which has been installed next to a Gruntfile,这句修饰“版本”怎么翻译?)。它允许多种版本的grunt同时安装在同一台机器上。

    二.CLI是如何工作的

    每一次运行grunt,它都会寻找本地的grunt(using node's require() system)安装。正因如此,你才可以在你的项目任何子文件夹里运行grunt。

    如果本地的grunt安装找到了,CLI加载来自grunt库的本地安装,依照Gruntfile进行配置,并执行你已经请求的任务。

    想明白到底是怎么执行的,read the code ,很短的哦。

    三.基于现有的grunt 项目工作

    假如你已经安装了Grunt CLI,并且对项目配置了package.json 和 Gruntfile.js,那么接下来就很容易来使用Grunt工作啦:

    1. 切换到项目根目录
    2. 使用 npm install 安装项目依赖
    3. 运行 grunt 命令

    四.准备一个新的grunt 项目

    通常需要添加这两个文件到你的工程:package.json 和 Gruntfile.js

    package.json:作为npm的模块,这个文件是npm用来为发布的项目来保存 metadata的。 你可以在这个文件的devDependencies 中配置项目需要的grunt和grunt插件。

    Gruntfile: 通常被命名为Gruntfile.js 或者 Gruntfile.coffee,用来配置或者定义任务,加载Grunt 插件。

    五.package.json

    package.json文件需要放置在你的项目根目录,它与Gruntfile文件位置一样,会随项目资源一起提交。运行 npm install 命令将会安装其配置的所有依赖版本。

    这里有几种方式用来为你的项目创建 package.json 文件:

    • 大多数的 grunt-init 模板将会自动创建一个项目指定的 package.json文件
    • npm init 命令将会创建一个基本的 package.json文件
    • 创建类似如下的package.json文件:
      复制代码
      {"name":"my-project-name","version":"0.1.0","devDependencies":{"grunt":"~0.4.1","grunt-contrib-jshint":"~0.6.0","grunt-contrib-nodeunit":"~0.2.0","grunt-contrib-uglify":"~0.2.2"}}
      复制代码

    六.安装grunt和grunt插件

    如果已经有了package.json文件,那么运行 npm install <module> --save-dev 命令。

    这个命令不仅仅是安装了 <module> ,也会自动将 tilde version range 添加到 devDependencies 。

    比如,下面的这个例子将会安装最近的Grunt到你的项目文件里,同时也会添加到devDependencies:

    npm install grunt --save-dev

    对于grunt 插件和其它的node 模块也是如此。请确保你完成这些后,将更新的package.json随同你的项目一起提交。

    七.Gruntfile

    同package.json一样,置于项目根目录,是个Gruntfile.js或者Gruntfile.coffee文件,随同项目一起提交。

    一个Gruntfile应当包含如下几部分:

    • 包装器函数
    • 项目和任务配置
    • 加载 grunt 插件和任务
    • 定义任务

    Gruntfile示例:

    如下的Gruntfile中,项目metadata从package.json中被导入到了grunt 配置里。grunt-contrib-uglify 插件的 uglify 任务被配置用来压缩源文件,并通过metadata信息动态生成banner comment。当grunt命令运行后,uglify任务将自动执行。

    复制代码
    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") %> */
    '},
          build:{
            src:'src/<%= pkg.name %>.js',
            dest:'build/<%= pkg.name %>.min.js'}}});// Load the plugin that provides the "uglify" task.
      grunt.loadNpmTasks('grunt-contrib-uglify');// Default task(s).
      grunt.registerTask('default',['uglify']);};
    复制代码

    现在,让我们看看Gruntfile的组成部分吧。

    包装器函数:

    任何的Gruntfile(包括grunt插件)都使用这个基本的格式,你所有的Grunt 代码必须在这个函数里面进行说明:

    module.exports =function(grunt){// Do grunt-related things in here};

    项目和任务配置

    多数的Grunt 任务依赖配置数据都是通过grunt.initConfig 这个方法来定义的。

    在这个示例中,grunt.file.readJSON('package.json')把存储在packag.json中的json metadata数据导入到了grunt配置中。因为 <% %> 模板字符串可能涉及任何配置属性,配置数据,比如文件路径,文件列表,通过此方式可以减少重复声明。

    你或许可以存储任意的数据在这个配置对象里,你爱咋咋地吧。

    和大多数的任务一样,grunt-contrib-uglify 插件的 uglify 任务期望它的配置被指定在同名属性中。此处,banner 选项和单一的uglify 目标build同时被指定(specified,翻译成啥好呢,说明?),build是用来缩减源文件到指定的文件。

    复制代码
    // Project configuration.grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify:{
        options:{
          banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
    '},
        build:{
          src:'src/<%= pkg.name %>.js',
          dest:'build/<%= pkg.name %>.min.js'}}});
    复制代码

    加载grunt插件和任务

    老外真他妈啰嗦,不就是类似下面这段执行命令么:

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    定制任务

    你可以通过定义default任务,让Grunt运行更多的任务。如下的示例,运行 grunt 命令行将会运行 uglify 任务。它等同于 grunt ugligy 或者 grunt default 命令行。任务配置都可以放在这个指定的数组中。

    // Default task(s).
    grunt.registerTask('default',['uglify']);

    如果你的任务需求Grunt 插件没有提供,你可以自己在Gruntfile中定义任务。例如,这个Gruntfile定义了一个完整的定制任务 default ,它甚至不需要任何任务配置。

    复制代码
    module.exports =function(grunt){// A very basic default task.
      grunt.registerTask('default','Log some stuff.',function(){
        grunt.log.write('Logging some stuff...').ok();});};
    复制代码

    定制任务并不需要定义Gruntfile,可以通过定义额外的js文件并通过 grunt.loadTasks 方法加载。

    -------------------------------------------------

    翻译自:http://gruntjs.com/getting-started

     
     
     
    标签: grunt
  • 相关阅读:
    snmp简介
    PKI简介
    小程序收藏
    mysql数据库中同一DB内倒表指令
    核心层+汇聚层+接入层
    eng
    rmon简介
    几个常用的JavaScript字符串处理函数
    C# 特性(Attribute)学习 关于 .net中[]的解释
    C#操作Excel文件(读取Excel,写入Excel)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3209035.html
Copyright © 2011-2022 走看看