zoukankan      html  css  js  c++  java
  • Grunt常见问题

    1、nodeJs 环境安装?
    进入官网:http://www.nodejs.org/ 根据操作系统,下载相应的安装包,直接安装即可。

    2、npm 安装?
    a) 如果系统没有安装过Git,可以直接到https://github.com/isaacs/npm下载npm所需要的文件。
    b) 如果有Git 可以使用git下载。

    git clone --recursive git://github.com/isaacs/npm.git

    下载到NPM文件后,命令行首先转到npm所在地址,输入以下代码进行安装。

    node cli.js install npm -gf 

    3、grunt-cli安装?

    npm install grunt-cli -g

    grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装。

    4、package.json?

    Grunt使用模块结构,除了安装命令行界面以外,还要根据需要安装相应的模块。这些模块应该采用局部安装,因为不同项目可能需要同一个模块的不同版本。
    首先,在项目的根目录下,创建一个文本文件package.json,指定当前项目所需的模块。下面就是一个例子。

    {
      "name": "vdian",
      "version": "0.1.0",
      "author": "vdian",
      "devDependencies": {
        "grunt": "0.x.x",
        "grunt-contrib-jshint": "*",
        "grunt-contrib-concat": "~0.1.1",
        "grunt-contrib-uglify": "~0.1.0",
        "grunt-contrib-watch": "~0.1.4"
      }
    }

    上面这个package.json文件中,除了注明项目的名称和版本以外,还在devDependencies属性中指定了项目依赖的grunt模块和版本:grunt核心模块为最新的0.x.x版,jshint插件为最新版本,concat插件不低于0.1.1版,uglify插件不低于0.1.0版,watch插件不低于0.1.4版。

    然后,在项目的根目录下运行下面的命令,这些插件就会被自动安装在node_modules子目录。

    npm install

    上面这种方法是针对已有package.json的情况。如果想要自动生成package.json文件,可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。

    npm init

    如果已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上--save-dev参数,该模块就会自动被加入package.json文件。

    npm install <module> --save-dev
    比如,对应上面package.json文件指定的模块,需要运行以下npm命令

    npm install grunt --save-dev
    npm install grunt-contrib-jshint --save-dev
    npm install grunt-contrib-concat --save-dev
    npm install grunt-contrib-uglify --save-dev
    npm install grunt-contrib-watch --save-dev

    5、命令脚本文件Gruntfile.js?

    模块安装完以后,下一步在项目的根目录下,新建脚本文件Gruntfile.js。它是grunt的配置文件,就好像package.json是npm的配置文件一样。Gruntfile.js就是一般的Node.js模块的写法。

    module.exports = function(grunt) {
      // 配置Grunt各种模块的参数
      grunt.initConfig({
        jshint: { /* jshint的参数 */ },
        concat: { /* concat的参数 */ },
        uglify: { /* uglify的参数 */ },
        watch:  { /* watch的参数 */ }
      });
      // 从node_modules目录加载模块文件
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-watch');
      // 每行registerTask定义一个任务
      grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
      grunt.registerTask('check', ['jshint']);
    };

    上面的代码用到了grunt代码的三个方法:

    grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。

    grunt.loadNpmTasks:加载完成任务所需的模块。

    grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default任务名表示,如果直接输入grunt命令,后面不跟任何参数,这时所调用的模块(该例为jshint,concat和uglify);该例的check任务则表示使用jshint插件对代码进行语法检查。

    上面的代码一共加载了四个模块:jshint(检查语法错误)、concat(合并文件)、uglify(压缩代码)和watch(自动执行)。接下来,有两种使用方法。

    (1)命令行执行某个模块,比如

    grunt jshint

    上面代码表示运行jshint模块。

    (2)命令行执行某个任务。比如

    grunt check


    上面代码表示运行check任务。如果运行成功,就会显示“Done, without errors.”。

    如果没有给出任务名,只键入grunt,就表示执行默认的default任务。

  • 相关阅读:
    PAT 甲题 1155 Heap Paths
    PAT甲题 1014 Waiting in Line
    PAT甲题 1014 Waiting in Line
    AcWing 840. 模拟散列表
    2019新生赛 %%%xxh
    AcWing 240. 食物链
    AcWing 143. 最大异或对
    AcWing 838. 堆排序
    AcWing 836. 合并集合
    AcWing 837. 连通块中点的数量
  • 原文地址:https://www.cnblogs.com/huangjianhuakarl/p/4016425.html
Copyright © 2011-2022 走看看