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
  • 相关阅读:
    yocto/bitbake 学习资源
    QEMU/KVM学习资源
    ubuntu 中创建和删除用户
    git 重命名本地和远程分支
    Ubuntu 上搭建 FTP 服务器
    gdb 常见用法
    git log 显示与特定文件相关的 commit 信息
    基于 qemu system mode 运行 arm 程序
    基于 qemu user mode 运行 aarch64 程序
    checking in(airport)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3209035.html
Copyright © 2011-2022 走看看