zoukankan      html  css  js  c++  java
  • grunt学习2

    grunt的任务配置都是在Gruntfile.js文件中的grunt.initConfig中配置的。

    grunt.initConfig({
      concat: {
        // 这里是concat任务的配置信息。
      },
      uglify: {
        // 这里是uglify任务的配置信息
      },
      // 任意数据。
      my_property: 'whatever',
      my_src_files: ['foo/*.js', 'bar/*.js'],
    });

    每个任务中可以配置多个目标

    grunt concat:foo或者grunt concat:bar,将只会处理指定目标(target)的配置,而运行grunt concat将遍历所有目标(target)并依次处理。

    grunt.initConfig({
      concat: {
        foo: {
          // 任务concat 的 "foo"目标相关文件配置
        },
        bar: {
          // 任务concat 的 "bar"目标相关文件配置
        },
      },
      uglify: {
        bar: {
          // 任务uglify的 "bar"目标相关文件配置
        },
      },
    });

    每个任务的options可以覆盖默认值,目标的options可以覆盖默认值。options属性可以被忽略

    grunt.initConfig({
      concat: {
        options: {
          // 这里是任务级的Options,覆盖默认值 
        },
        foo: {
          options: {
            // "foo" target options may go here, overriding task-level options.
          },
        },
        bar: {
          // No options specified; this target will use task-level options.
        },
      },
    });

    任务和目标中的文件源和目标指定

    简洁格式:(可指定额外属性)

      用"src"属性指定源(值可以是字符串或字符串数组)

      用"dest"属性指定目标

    文件对象格式:(不可指定额外属性)

      用"files"属性指向一个js对象,此对象每个键为目标,值为源(类型为字符串或字符串数组)

    文件数组格式:(可指定额外属性)

      用"files"属性指向一个js数组,数组元素为对象,对象"src"属性为源(类型为字符串或字符串数组),"dest"为目标

    简洁格式
    grunt.initConfig({
      jshint: {
        foo: {
          src: ['src/aa.js', 'src/aaa.js']
        },
      },
      concat: {
        bar: {
          src: ['src/bb.js', 'src/bbb.js'],
          dest: 'dest/b.js',
        },
      },
    });
    
    文件对象格式
    grunt.initConfig({
      concat: {
        foo: {
          files: {
            'dest/a.js': ['src/aa.js', 'src/aaa.js'],
            'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
          },
        },
        bar: {
          files: {
            'dest/b.js': ['src/bb.js', 'src/bbb.js'],
            'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
          },
        },
      },
    });
    
    文件数组格式
    grunt.initConfig({
      concat: {
        foo: {
          files: [
            {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
            {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
          ],
        },
        bar: {
          files: [
            {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
            {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
          ],
        },
      },
    });
    
    自定义过滤函数
    grunt.initConfig({
      clean: {
        foo: {
          src: ['tmp/**/*'],
          filter: 'isFile',
        },
      },
    });
    
    动态构建文件对象
    grunt.initConfig({
      uglify: {
        static_mappings: {
          // Because these src-dest file mappings are manually specified, every
          // time a new file is added or removed, the Gruntfile has to be updated.
          files: [
            {src: 'lib/a.js', dest: 'build/a.min.js'},
            {src: 'lib/b.js', dest: 'build/b.min.js'},
            {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
            {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
          ],
        },
        dynamic_mappings: {
          // Grunt will search for "**/*.js" under "lib/" when the "uglify" task
          // runs and build the appropriate src-dest file mappings then, so you
          // don't need to update the Gruntfile when files are added or removed.
          files: [
            {
              expand: true,     // Enable dynamic expansion.
              cwd: 'lib/',      // Src matches are relative to this path.
              src: ['**/*.js'], // Actual pattern(s) to match.
              dest: 'build/',   // Destination path prefix.
              ext: '.min.js',   // Dest filepaths will have this extension.
              extDot: 'first'   // Extensions in filenames begin after the first dot
            },
          ],
        },
      },
    });
    
    模板
    grunt.initConfig({
      concat: {
        sample: {
          options: {
            banner: '/* <%= baz %> */
    ',   // '/* abcde */
    '
          },
          src: ['<%= qux %>', 'baz/*.js'],  // [['foo/*.js', 'bar/*.js'], 'baz/*.js']
          dest: 'build/<%= baz %>.js',      // 'build/abcde.js'
        },
      },
      //用于任务配置模板的任意属性
      foo: 'c',
      bar: 'b<%= foo %>d', // 'bcd'
      baz: 'a<%= bar %>e', // 'abcde'
      qux: ['foo/*.js', 'bar/*.js'],
    });
    
    导入外部数据
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
        options: {
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
    '
        },
        dist: {
          src: 'src/<%= pkg.name %>.js',
          dest: 'dist/<%= pkg.name %>.min.js'
        }
      }
    });

    额外属性特殊属性:

      filter:用来过滤文件,值为内置值或一个返回true或false的函数

      nonull:如果为true

      dot:是否匹配已.开头的文件,在linux中.开头的文件是隐藏文件

      matchBase:匹配模式是否配置的是文件名还是整个文件路径

      expand:是否使用动态构建文件对象(主要用来写一个任务来处理所有的文件,不管以后文件增删改)

        expand为真的时候下列属性起作用

        src:指定来源(字符串或字符串数组)

        cwd所有src中指定的路径相对的时此路径

        dest:目标路径

        ext:生成的目标文件的后缀名用此值来替换

        extDot:源文件的扩展名如何定位"first"文件名中的第一个.开始为后缀名,"last"文件名中最后一个.开始为后缀名

        flatten:从生成的dest路径中移除所有的路径部分

        rename:对每个匹配的src文件调用这个函数(在重命名后缀和一处路径之后)

        

    文件指定中的通配符:

      *    匹配任意数量的字符,但不匹配/

      ?    匹配单个字符,但不匹配/

      **    匹配任意数量的字符,包括/

      {}    花括号中为"或"的关系

      !    不匹配

      例如:foo/*.js匹配foo目录的下所有js文件,foo/**/*.js匹配foo目录及其子目录下的js文件

    // 指定单个文件:
    {src: 'foo/this.js', dest: ...}
    // 指定一个文件数组:
    {src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: ...}
    // 使用一个匹配模式:
    {src: 'foo/th*.js', dest: ...}
    
    // 一个独立的node-glob模式:
    {src: 'foo/{a,b}*.js', dest: ...}
    // 也可以这样编写:
    {src: ['foo/a*.js', 'foo/b*.js'], dest: ...}
    
    // foo目录中所有的.js文件,按字母顺序排序:
    {src: ['foo/*.js'], dest: ...}
    // 首先是bar.js,接着是剩下的.js文件,并按字母顺序排序:
    {src: ['foo/bar.js', 'foo/*.js'], dest: ...}
    
    // 除bar.js之外的所有的.js文件,按字母顺序排序:
    {src: ['foo/*.js', '!foo/bar.js'], dest: ...}
    // 按字母顺序排序的所有.js文件,但是bar.js在最后。
    {src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}
    
    // 模板也可以用于文件路径或者匹配模式中:
    {src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
    // 它们也可以引用在配置中定义的其他文件列表:
    {src: ['foo/*.js', '<%= jshint.all.src %>'], dest: ...}
  • 相关阅读:
    获取<input type="checkbox" >控件的checked值
    网站IIS部署及调试
    winform窗体全屏实现
    ComBox控件的使用
    在vs2005项目中,将.sln文件和.suo文件放在一个独立的文件夹内
    .NET面试题整理
    《url重写——更友好的网站url设计》
    char、varchar、nvarchar三者间的区别
    操作符"??"的用法
    Maven 学习笔记(三)
  • 原文地址:https://www.cnblogs.com/gameshan/p/4632598.html
Copyright © 2011-2022 走看看