zoukankan      html  css  js  c++  java
  • Grunt 入门指南1

    原文:http://gruntjs.com/getting-started

    Getting started

    Grunt 和 Grunt的插件都是通过npm来安装和管理滴。

    Grunt 0.4.x 要求 Nodejs>=0.8.0。

    安装CLI

    如果你以前全局安装过Grunt, 需要先卸载掉

    npm uninstall -g grunt
    

    全局安装Grunt CLI,你可能需要使用sudo命令,或者使用管理员权限

    npm install -g grunt-cli
    

    执行了之后,grunt命令就在你的系统path里了,可以在任何目录里执行。

    注意了~,装上了 grunt-cli 不代表就装上了grunt task runner!, grunt CLI的工作很简单:将某个版本的grunt安装到 Gruntfile的旁边。它还允许同时安装多个版本的grunt在同一台机器上。

    CLI 是咋工作的

    每次grunt执行的时候,都会先使用node的require()方法来查看本地安装的grunt. 基于此,你可以在你项目的任意子目录里执行grunt 命令

    如果找到了本地安装的Grunt, CLI就载入本地安装的grunt库,并且使用Gruntfile里的配置,执行你需要运行的任何tasks。

    在现有的grunt项目中如何工作

    假设Grunt CLI已经安装并且项目已经配置好了package.json和Gruntfile, 开展工作就十分滴简单: 1. 定位到项目的根目录 2. 使用 npm install 安装项目依赖 3. 执行grunt

    这就是所有的事情鸟!~ 已装的Grunt tasks 可以用grunt --help命令列出来。

    打包一个全新的grunt项目

    典型的项目设置是包含两个文件: packge.json 和 Gruntfile.

    packge.json 文件用来让npm 安装项目依赖 Gruntfile 这个文件命名为 Gruntfile.js 或者 Gruntfile.coffee, 里面配置或定义了tasks以及需要载入的Grunt插件.

    • package.json //项目自动化所依赖的相关插件。
    • Gruntfile.js //项目自动化工作流配置文件,重要

    package.json

    package.json 放在项目的根目录下,并且应该被提交到源码中,执行在package.json同目录执行nom install,就会安装每个列在里面的依赖。

    有几个方式可以创建package.json

    {
      "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"
      }
    }
    

    安装Grunt 和 gruntplugins

    通过 npm install (module) --save-dev命令把Grunt和runtplugins加入到已存在的package.json. 很方便。这并不只是安装(module) 到本地,而是使用tilde version range 自动加到 devDependencies 节后面。

    有关 Gruntfile

    Gruntfile.js 或者 Gruntfile.coffee 是一个有效的js或者coffeescript文件,放在你项目的根目录下,和package.json在一起,并且要被提交到项目的源码中去。

    一个Gruntfile 有下面几部分组成: * "wrapper" 函数 * project和task配置 * 载入grunt plugins和tasks * 自定义的tasks

    一个Gruntfile的例子

    下面的Gruntfile中,项目的元数据package.json 被导入到grunt的配置中,grunt-contrib-uglify 插件的 uglify task 用来配置压缩源码以及使用该元数据动态产生一个banner注释。 当grunt运行时,uglify task 将会默认执行.

    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: {
            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, 下面让我们看看它的各个组件部分。

    "wrapper" 函数

    每个Gruntfile (和grunt plugin) 都使用这个基本格式, 并且你的Grunt 代码必须放在这个函数里头:

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

    Project 和 task 配置

    大多数 Grunt tasks 通过 grunt.initConfig 定义一个对象当作配置数据。

    在这个例子中, grunt.file.readJSON('package.json') 导入了package.json 的JSON元数据到grunt 的配置中。 因为<% %> 模版字符可以引用任何配置的属性,所以配置的数据像 文件路径 和 文件列表都可以用这个方式来避免重复。

    你可以在配置对象里存任意数据,只要不和你的tasks必须的属性相冲突,否则将会被忽略掉。同样,因为这是js,你不必限制使用JSON,只要是有效的js都可以写在这里,你甚至可以在必要的时候通过程序来生成这个配置。

    就像大多数tasks一样, grunt-contrib-uglify 插件的 uglify task 期望配置与它同名,这里指定了 banner 选项,以及一个名叫 build 的属性用来把一个源码压缩并放置到一个目标文件。

    // Project configuration.
    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'
        }
      }
    });
    

    载入 grunt plugins 和 tasks

    大多公用的tasks 像 concatenation minification 和 linting 都已经是grunt 的plugins。 只要一个plugin被指定为package.json的一个依赖,并且通过npm install 安装,就可以在Gruntfile通过简单的方式启用:

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

    自定义 tasks

    你可以通过default task来配置Grunt 在默认情况下运行一个或多个task。在下面的例子中,运行grunt 就会执行 uglify task. 这个功能等同于执行 grunt uglify 或者 grunt default. 任意数量的tasks 可以放入一个数组中.

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

    如果你的项目必须的tasks并没有现成的Grunt plugin, 你可以在Gruntfile自己定义一个自定义task。比如,这份Gruntfile定义了一个完全不使用task 配置的 default task.

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

    自定义项目指定的tasks并不一定需要放在Gruntfile中,也可以通过grunt.loadTasks() 方法来引入.js 的外部文件.

  • 相关阅读:
    boost库
    DISALLOW_COPY_AND_ASSIGN
    汇编语言入门
    gflags
    Segmentation Fault
    ubuntu16.04_cuda9.0_opencv3.4_cudnn_v7_caffe
    make: aarch64-himix100-linux-gcc: Command not found
    gtest
    glog
    [Go]go语言实战-go版本的supervisord编译安装与运行
  • 原文地址:https://www.cnblogs.com/zhepama/p/3081074.html
Copyright © 2011-2022 走看看