前段集成解决方案grunt+yeoman初步认识10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:138 发布时间:2020-03-31
摘要:module.exports = function(grunt) { grunt.initConfig({ hello: { options: { who: 'Kate' } } }); grunt.registerTask("hello", function() { var options = this.options({ who: 'unknown' }); console.log('hello,'+options.who); //hello,Kate });}; *基本
module.exports = function(grunt) { grunt.initConfig({ hello: { options: { who: 'Kate' } } }); grunt.registerTask("hello", function() { var options = this.options({ who: 'unknown' }); console.log('hello,'+options.who); //hello,Kate });};
*基本的属性介绍

uglify 压缩js文件
concat 合并文件
cssmin 压缩css
jshint 检测JS文件
nodeunit node测试
htmlhint 检测html
watch 监控文件变化
qunit 单元测试
connect 连接服务器

dist 任务
files 配置多个源文件到目标文件的映射
cwd 源文件目录
src 源文件
dest 目标文件
options 默认设置
ext 后缀名
filter 过滤器(函数或者函数名)
nonull 非空
dot 。替换的位置
expand 执行一个动态的 源文件到目标文件的映射

 

module.exports = function(grunt) { grunt.initConfig({ hello: { options: { who: 'Kate' }, Jingle:{ options: { who: 'Jingle' } } } }); grunt.registerMultiTask("hello", function() { var options = this.options({ who: 'unknown' }); console.log('hello,'+options.who); //hello,Jingle });};
匹配模式

**----任意字符,包括反斜杠
*-----任意字符,不包括反斜杠
?*----任意一个字符
{a,b}-a,b中的任意字符
!----取反

 

这个是定义文件数组的最简单的模式,直接定义文件字符串或文件名数组,对应files[0].src, target属性值对应files[0].dest。该格式不支持附加属性。

4.grunt

 安装grunt

 npm  install -g grunt-cli

 yeomen是基于node生成的,所以首先访问的是package.json文件;

 这个文件是一个对象形式表现的(基本介绍):

 name---项目名(并不是文件名)

 version---版本号

 dependencies---项目在生成环境中依赖的包

 devDependcies---开发时候的依赖的包

 engines----当前需要的版本

 scripts----可以直接使用NPM的脚本命令 

 

 生成项目中的其他文件基本介绍:

 Gruntfile.js文件---grunt配置文件

 bower.json文件-----bower配置文件

 .travic.yml文件-----为开源打造的集成环境

 .jshintrc文件-----jshin的配置文件

 .gitignore--------指定当前要忽略的文件,不上传到git 

 .gitattrbutes-----git配置文件

 .editorconfig-----定义编辑时候的风格

 .bowerrc----------bower的配置项

 test-------提供自动化测试

 .babelrc -------- ec6 向 ec5进行转码

2.简洁格式

3.bower

  版本管理控制工具

  安装bower

  npm isntall -g bower

{src: ['foo/*.js', '!foo/bar.js'], dest: ...}

5.grunt配置文件

 grunt作为函数的参数传递;

 每一个Gruntfile文件 grunt- 都有一个这样最外层结构,require funcation

 task 任务

 代码压缩、目录清除、创建目录、都称之为任务

 initConfig(opt)中配置的单元task,每一task都可以单独存在和执行

sass:将sass文件转换成css文件并生成到对应的文件{
dist:{
  files:[{
    expand:true,
    cwd:'<%= config.app %>/style',
    src:['*.{scss,sass}'],
    dest:'.tmp/style',
    ext:'.css'
  }]
}

registTask(name,funcation(){
  grunt.task.run([
    task,
    task
  ])
})

 

对于生成的dest路径中所有实际存在文件,均使用这个属性值替换扩展名。

7.grunt和grunt任务

 npm uninstall -g grunt                             删除grunt

 npm install -g grunt-cli                            安装grunt

 配置任务

任务都是定义在initConfig中

配置任务和目标 (可以在任务配置多个目标,执行多个任务------concat任务中配置两个目录(执行两个任务),uglify中配置一个目标(执行一个任务))

grunt.initConfig({  

   concat: {

    foo: {   concat task "foo" target options and files go here.  },  

    bar: {   concat task "bar" target options and files go here.  },  

  },

   uglify: {

    bar: {   uglify task "bar" target options and files go here.  },  

  }

})

grunt.loadNpmTasks('grunt-contrib-uglify');        //加载任务的对应grunt插件(先npm install)
grunt.registerTask('default', ['uglify']);               //注册任务,这样才能用grunt命令执行该任务

concat,uglify都可以单独执行它下面的某一个任务

执行单个目标任务        指令:grunt contat:foo (执行目标任务--foo)

 

 

*匹配任意数量的字符,但不匹配 /?匹配单个字符,但不匹配 /**匹配任意数量的字符,包括 /,只要它是路径中唯一的一部分{}允许使用一个逗号分割的字符列表,用来匹配字符列表中的任一个字符,如{a,b}匹配a或者b!在模式的开头用于排除该匹配模式所匹配的任何文件,例如

6.从无到有构建Grunt项目

进入更目录 运行                                   npm init

安装grunt                                          npm install grunt --save-dev

安装load-grunt-tasks                          npm install load-grunt-tasks --save-dev

安装文件copy                                     npm install grunt-contrib-copy --save-dev

安装文件删除                                      npm install grunt-contrib-clean --save-dev

 

 创建Gruntfile文件

module.exports=funcation(grunt){

  require('load-grunt-tasks')(grunt);

  var config={

    app:'app',

    dist:'dist'

  }

  grunt.initConfig({

    config:config,

    //配置copy命令

    copy:{

      //方法一

      files:{

        //将src的文件复制到dist中

        dest:src,

      }

      //方法二

      files:{

        expand:true,                                               //将cwd目录下的所有 .html文件 复制到dest中 后缀名改为 .min.html

        cwd:'<%= config.app %>/',                         //源文件目录

        src:'.html',                            //源文件格式

        dest:'<%= config.dist %>/',                         //目的目录

        ext:'.min.html',                  //目的文件的后缀名

                      extDot:'first/last'                                          //选中第一个点开始  改后缀名,

        flatten:false/true                                          //true创建对应的文件目录

        rename:funcation(dest,src){          //自定义名称

          retrun dest+"js/"+src;

          }

        }

      },

    clean:{

      dist:{

        src:<%= config.dist %>/**/*,                       //清除所有目录,或者目录下的文件

        filter:'fnName'||funcation(filePath){ retrun true/false },

        dot:true/false                  //.的配置文件

      }

     }

    })

}

filter属性对匹配到的源文件进行过滤,去除不符合条件的源文件。filter属性可定义为任意一个有效的fs.Stats方法名:

动态创建文件

expand:设为 true 来启用下面这些属性。
cwd:所有的 src 都相对于此路径(但是不包含)。
src:需要匹配的模式,相对于cwd。
dest:目标文件。
ext:在dest中的所有文件后缀都替换掉。
flatten:在dest中的所有路径的片段都替换掉。
rename:每当匹配到一个src时,都会调用此方法(在ext和flatten执行之后)。dest和src属性会被当参数传入,这个函数必须返回一个新的dest值。如果相同的dest被返回超过一次,每一个用它的src都会被添加到一个源数组。

 

注册多任务

grunt.initConfig({  

  log: {  

    foo: [1, 2, 3],  

    bar: 'hello world', 

    baz: false  

  }

})

grunt.registerMultiTask('log', 'Log stuff.', function() {
  grunt.log.writeln(this.target + ': ' + this.data);
});

运行             grunt log:foo             打印[1,2,3]      

运行             grunt log:bar             打印'hello world'

 

注册基本任务

grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) {
  if (arguments.length === 0) {
    grunt.log.writeln(this.name + ", no args");
  } else {
    grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
  }
});

运行           grunt foo:testing:123            打印"foo, testing 123"

自定义任务

grunt.registerTask('foo', 'My "foo" task.', function() {
  可以运行其他任务
  grunt.task.run('bar', 'baz');        //执行bar.baz
});

        

前段集成解决方案grunt+yeoman初步认识

 

3.cwd

1.什么是前段集成解决方案?

  将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题、不足、缺陷和需求,所提出的一种解决问题的方案

简洁格式(Compact Format)允许单独定义src或dest,支持附加属性,直接对应files[0]。

2.yeoman

  应用的架构,模型!  相当于一个生成器,,通过模具生成框架

  安装Yeomen

  npm install -g yo

  安装anluarjs应用模型(安装模具)

  npm isntall -g generator-angular 

  生成angular项目

  yo angular appName

  在自动生成过程中有多个选择,按自己的项目需求进行选择获取项目框架。

4.ext

文件对象格式(Files Object Format)支持多个src-dest映射,属性名是目标文件,属性值是源文件。可利用该格式指定多个映射,但是不支持附加属性。

8.filter

1.最简格式

相当于

grunt.initConfig({ clean: { foo: { src: ['tmp/**/*'], filter: function(filepath) { return filepath.length = 4; }, }, },});

grunt会为task对象新增options方法,该方法除了会获取配置参数下与task名称对应属性下options属性中的值,其值还会进一步被目标级的options对象的属性覆盖,例如

{ options: { who: 'Jingle' }}
module.exports = function(grunt) { grunt.initConfig({ Log: { jian1:"1.txt", //最简格式 jian2:["1.txt","2.txt"], //最简格式 compact:{dest:"/dist",prop1:true}, //简洁格式 fileobject: { //文件对象格式 files: { 'dest/a.js': ['src/aa.js', 'src/aaa.js'], 'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'] } }, filearray: { //文件数组格式 files: [ {src: ['src/a.js', 'src/b.js'], dest: 'dest/a/', nonull:true,prop1:true}, {src: ['src/a1.js', 'src/b1.js'], dest: 'dest/a1/', filter: 'isFile'} ] } } }); grunt.registerMultiTask("Log", function() { console.log(this.files); });};
// 除bar.js之外的所有的.js文件,按字母顺序排序:{src: ['foo/*.js', '!foo/bar.js'], dest: ...}// 按字母顺序排序的所有.js文件,但是bar.js在最后。{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

复合任务会依次执行其所包含的所有除了options以外的已命名的子属性。相应的,注册复合任务的方法也会依次预处理除了options以外的已命名的子属性。每轮任务中,grunt会为task对象赋予target属性,target属性值为配置对象当前正被遍历的目标的名称。data属性值为配置对象当前正被遍历的目标对应的数据。如上例中,在子任务Log:Jingle中,target为Jingle,data为:

5.实例

五、动态构建文件数组

用于指定标记扩展名的英文点号的所在位置。可以赋值 'first' (扩展名从文件名中的第一个英文点号开始) 或 'last' (扩展名从最后一个英文点号开始),默认值为 'first'。

grunt命令通过grunt taskname:arg1:arg2形式的脚本来传入参数。grunt会给task对象增加nameArgs属性,其值为"taskname:arg1:arg2"grunt会给task对象增加name属性,其值为"taskname"grunt会给task对象增加args属性,registerTask方法下其值为 [ 'arg1', 'arg2' ],registerMultiTask方法下其值为 ['arg2' ]grunt会给task对象增加flags属性,registerTask方法下其值为 [ arg1:true, arg2:true ],registerMultiTask方法下其值为 [arg2::true]grunt会将args作为参数传给任务的执行函数,registerTask方法下会将arg1,arg2作为执行函数的参数,registerMultiTask方法下会将arg2作为执行函数的参数。

由于大多的任务都是执行文件操作,Grunt的注册复合任务的方法中会尽量的将data进一步处理,将其支持的各种格式自动标准化为一个唯一的格式:文件数组格式并将其赋值给任务对象的files属性。Grunt支持如下的文件模式:

本文由10bet发布于Web前端,转载请注明出处:前段集成解决方案grunt+yeoman初步认识10bet

关键词:

最火资讯