zoukankan      html  css  js  c++  java
  • grunt

    grunt能够自动执行配置好的任务
     
    命令行:
    切换根目录直接: f:
    切换路径 cd cw
    返回上一层 cd..
     
    安装使用grunt:
    npm install -g grunt-cli   安装
    注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。每次运行grunt 时,他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt
     
    取消操作 ctrl c 
     
    package.json(此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。):
    在package.json所在目录中运行npm install将依据package.json里指定的node依赖
    {
      "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最新版本到项目目录中,并将其添加到devDependencies内:
    npm install grunt --save-dev
    想用某个插件,先要添加依赖并然后安装好,才能在Gruntfile中加载使用。
     
     
     
    Gruntfile(用来配置或定义任务(task)并加载Grunt插件的)组成结构:
     
    接下来就可以定义每个任务的配置信息,每一个任务的配置对象作为grunt.initConfig({})的属性:
    module.exports = function(grunt) {
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),  // 从package.json中读取配置内容,然后就可以  pkg.version  来读取里面信息
        concat: {                                 //这里就定义了一个合并任务了
          options: {
            separator: ';'                        //合并后每个被合并的文件之间的分割符号
          },
          dist: {
            src: ['src/**/*.js'],                //需要合并的文件,foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件;而foo/**/*js将匹配foo/目录以及其子目录中所有以.js结尾的文件
            dest: 'dist/<%= pkg.name %>.js'       //合并后的文件存放地址
          }
        },
        uglify: {                                 //这是另一个压缩任务
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */ '    //这段将插入到输出内容头部
          },
          dist: {
            files: {
              'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']           //把上面合并后的文件压缩到dist/地址下
            }
          }
        },
        qunit: {
          files: ['test/**/*.html']                                  //测试运行的文件
        },
        jshint: {
          files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],     //定义需要语法质量检测的文件
          options: {                                         
            globals: {                                              //这里可以覆盖掉jshint默认的选项,http://www.jshint.com/docs/
              jQuery: true,
              console: true,
              module: true,
              document: true
            }
          }
        },
        watch: {                                                      //监视任务,这里是监视和jshint相同的文件,如果这些文件发生了改变
          files: ['<%= jshint.files %>'],                            //它就会自动运行task里面指定的任务,按照出现的顺序执行
          tasks: ['jshint', 'qunit']
        }
      });
     
      grunt.loadNpmTasks('grunt-contrib-uglify');       //加载插件,这样上面才能完成uglify任务
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-qunit');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-concat');
     
      grunt.registerTask('test', ['jshint', 'qunit']);   //需要执行这个任务的话,执行grunt test
     
      grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);   //默认被执行的任务,也就是只输入grunt的时候执行
    };
     
    grunt --help 命令将列出所有可用的任务。
     
     
    任务配置和目标:
    grunt.initConfig({
      concat: {
        options: {
          // 这里是任务级的Options,覆盖默认值 ,option是可选的
        },
        foo: {   //这时concat下的foo目标,如果需要只运行它,可以:grunt concat:foo
          options: {
            // 目标可以有option,会覆盖上一级
          },
        },
        bar: {
          // 不指定option的话,会使用上一级的option
        },
      },
    });
     
  • 相关阅读:
    Asp.Net Core 进阶(一) —— 读取appsettings.json
    chrome控制台模拟hover、focus、active等状态,方便调试
    windows server 注意windows的temp目录
    (转)大公司里怎样开发和部署前端代码?
    排序算法——二分插入排序
    排序算法——归并排序
    排序算法——冒泡排序
    排序算法——插入排序
    排序算法——快速排序
    linux安装和配置 mysql、redis 过程中遇到的问题记录
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5166295.html
Copyright © 2011-2022 走看看