视频地址:http://www.imooc.com/learn/30
一、什么是前端集成解决方案?
一套包含框架和工具,便于开发开发者快读构建美丽实用的web应用程序的工作流,同时这套工作流必须是稳健强壮的。
二、前端集成解决方案主要解决那些问题?
1.统一风格。2.前期组件库维护。3.模块化前端项目。4.压缩简化
三、目前主流的前端集成解决方案?
前端自动化工具yeoman , bower, grunt | gulp整套流程整合可视化的app : Codekit(Mac)1、为什么我生成的webapp里边没有gruntfile.js而是gulpfile.js国内的流程整合可视化的app :百度的FIS , 腾讯的Spirit四、NodeJS环境的安装参见:http://blog.csdn.net/aaa333qwe/article/details/75643372五、命令行工具window环境:git -->git bash六、 npm安装包执行node install ,查找目录下package.json ,1、yeoman (现代Web App的脚手架工具)(1)、yeoman提供了代码校验、测试、压缩等基本功能,生成器自由发挥。 (2)、安装:终端输入:npm install -g yo 注:注册名与商标名不同。注册名是yo,商标名是yoman2、bower (web的包管理器,用来跟踪管理框架,库,公用部分)(3)、查询版本号:终端输入:yo --version(4)、yeoman 在web项目立项阶段 生成项目文件,代码结构,自动整合最佳实践工具(1)、全局安装 npm install -g bower(2)、比如我们web工程要使用jquery1.11.1版本,之前我们要亲自到jquery公网上将这个版本下载下来,然后使用,现在只需要将这个版本号告诉bower就可以了 (3)、查询版本号终端输入:bower -v 3、grunt (build tool)(外注:构建工具)2、步骤:(1)、自动化,减少像像压缩,编译,单元测试,代码校验这种重复且无业务关联的工作。 (2)、安装:终端输入:npm install -g grunt-cli (3)、执行,看是否安装成功。终端输入:grunt 如果出现错误消息:fatal error: unable to find local grunt,就是安装成功了。(出现错误提示的原因:grunt cli会执行当前目录中package.json文件中指定安装的grunt版本来读取我们当前所在目录下的grunt file 的配置文件,然后按照其中的配置项来对我们的项目进行自动化。为什么这样设计?为了让多个grunt版本并存来支持新老项目)七、为什么我们需要Build tool?自动化,减少像像压缩,编译,单元测试,代码校验这种重复且无业务关联的工作。优选grunt | gulp。八、yoman实践1、yeoman 只是一堆橡皮泥,还需要各式各样的模具--Generator2、使用yoman创建工程: 使用generators生成,generators并不是随意生成的,需要各取所需,自行生成。比如生成一个angular项目工程需要使用generators-angular 安装angular/webApp工程:npm install -g gengerators-angualr/gengerators-webapp 创建工程所在的目录:mkdir yo-in-action 进入目录:cd yo-in-action 创建工程所在目录:mkdir angular-in-action 进入目录:cd angular-in-action 创建工程(例:工程名为“learnangular”):yo angular learnangular3、npm install /npm update 就会更新所在项目dependecies 中的包~波浪号,是一个比较严格的版本限制,要求只能是最小的版本号的更新。0.4.6支持,但是0.5.X 就不支持了 尖括号:0.5.X支持,直到1.X.X 就不支持了。啥都不加,末版本号锁定4、注意sass是基于ruby构建的,因此电脑上应已经安装了ruby。ruby安装参照:http://www.runoob.com/ruby/ruby-installation-windows.html九、package.json 文件解析name: 项目名 version: 版本号 dependecies:项目生产环境中需要的依赖的node包----web站点是没必要加,因为只有站点发布 devDependecies:开发过程中所要依赖的node包 ----"包名":"版本号"//^尖括号代表 比较宽松的对版本的限制,只限制主版本号 eg: "grunt":"^0.4.1" //如果安装的时候 grunt发布了0.4.6安装时会自动更新 1.X.X时 则只能更新到 0.X.X的版本 【比较宽松】 ----------------- ~波浪号代表 比较严格的版本限制 eg:"grunt":"~0.4.1" //如果安装的时候 grunt发布了0.4.6安装时会自动更新 0.5.0时 则不会 【比较严格】 "engines":{"node":">=0.10.0"}//表指定所需的node版本 "scripts":{ //可以直接使用npm的脚本命令 "test":"grunt test" //如果在当前项目所在目录下执行npm test 其实是执行 grunt test }十、yoman构建项目目录解析Gruntfile.js grunt配置文件 bower.json bower配置自动下载哪些框架和工具.bowerrc bower本身的配置文件,比如线上的框架,下载后存放的目录eg:bower_components.travis.yml 为开源打造的集成开发环境.jshintrc jshin配置文件.gitignore 忽略当前不上传到git的文件.gitattributes git配置项.editorconfig 编辑器设置test 自动化测试app 项目源文件十一、bower实践1、bower.json的作用跟package.json类似,也是方便新用户根据其中的配置项安装项目所用到的插件和组件bower install 项目名 --save-dev开发环境 保存配置到bower.json的devDependencies配置项里 bower install 项目名 --save生产环境 保存配置到bower.json的dependencies配置项里 bower init 开始指示进行构建bower.json 类似 npm init 创建package.jsonbower install 会按照bower.json的配置依次地从线上下载相应的框架和工具vim .bowerrc 搭建配置文件 directory目录,proxy代理 proxy:"http://proxy.tengxun.com:8080","https-proxy":"https://proxy.tengxun.com:8080"bower会先去找要安装的组件是否在他的注册库里,然后再去github找相应的安装地址3、原来.bowerrc还有这么多设置的十二、grunt实践中的Task,Target和Options"directory" : "bower_components" 线上的框架,下载后存放的目录proxy代理 :"proxy" : "http://proxy.tengxun.com:8080","https-proxy" : "https://proxy.tengxun.com:8080""timeout":60000ms, 设置过时时间4、四种方式使用bower安装库(1). 使用库在bower上的注册名 (2). 使用github短写 (3). 使用github仓库全称 (4). 使用url## take:任务 target:目标 option:操作
方案一:你所使用的generator-webapp版本不对,在0.6.2以后就没有gruntfile.js文件了!
npm install generator-webapp@v0.6.2
方案二:
因为在新版本的webapp里面用gulp代替了grunt,gulp和grunt其实差不多,不过要跟着视频学习的话,可以用angular这个生成器,安装方法前面视频有说。
1
|
yo angular yourProjectName
|
之后,会询问是否用gulp代替grunt,选择否就可以了
方案三:
generator-webapp grunt所需版本注意:yeoman选用了v1.3.2 ,generator-webapp 选用了v1.0.1,否则是生成gulpfile.js
相关代码:npm install yo@1.3.2 –g //安装1.3.2的版本
npm install generator-webapp@1.0.1 –g //安装1.0.1的版本
总结 : 老师的yeoman是旧的版本,当时yeoman采用的是grunt,现在已经采用gulp了,所以才会出现你说的问题。gulp和grunt是类似的,都是工程化工具,很多任务(task)的配置原理都是相同的,不过gulp目前大有超过grunt的趋势,所以建议你直接采用gulp即可。出现gulpfile.babel.js之后,在命令行输入gulp server,然后回车查看网页效果2、modernizr 用来检测用户浏览器是否支持默写h5和css3新特性的一个JS库
十三、从无到有Grunt项目 1、 开源许可证(宽严程度排序)MIT --->BSD--->ISC--->Apache--->GPL(Liunx) MIT最宽松,作者只想保留版权无任何其他限制
2、GruntFile.js需要做一定的修改
mpn init:create packge json file npm install grunt -sve-devnpm install load-grunt-tasks --save--dev npm install time-grunt --save-devrequire('time-grunt')(grunt): 执行grunt命令后,统计task执行时间。 require('load-grunt-tasks')(grunt): 加载配置文件中所有依赖的task。
3、Grunt Files 处理方式
(1)、安装grunt常见的task
说明:图中的"copy"、"clean"等是task,其中的"dist_html"、"dist"是target,而且只是target名字,可自定义;其中的"src"、"dest"是属性。
npm install grunt-contrib-copy --save-dev
eg:
copy:{ dist_html: { files: [ { expand: true, cwd: '<%= config.app %>/', src: '**/*.js', dest: '<%= config.dist %>/', ext: '.js', exDot: 'first', flatten: true, rename: function(dest,src){ return dest + 'js/' + src } } ] }, }, npm install grunt-contrib-clean --save-dev
eg:
clean:{ dist: { src: ['<%= config.dist %>/**/*'], filter: function(filepath){ return(!grunt.file.isDir(filepath)) }
//makeBase:如果设置为true,就只匹配文件路径的最后一部分。比如,a?b可以匹配/xyz/123/acb,而不匹配/xyz/acb/123
makeBase:true,
}
},
参数说明:
(2)、匹配规则ext表示是否修改目标文件的后缀名 ext:'.min.html' extDot表示修改的位置 extDot:first 从第一个点开始 flatten是否保留目录 flatten:true 去掉中间的各层目录 rename 在ext和flatten执行后被调用 rename:function(dext,src){}(图中函数作用是找回被flatten去掉的目录) 23:12额外参数: filter nonull 调试 dot:true 命中以"."开头的文件 matchBase expand:true 处理动态的src到dest的文件映射expand:true;cwd:当前路径;src:原路径;dest目标路径;ext:压缩后的文件名;extDot:表示从文件的哪个点来修改后缀(first、last)
*匹配任意字符,不包括反斜杠(\) ?只匹配一个字符,不匹配反斜杠(\) **匹配任意数量的任意字符,包括反斜杠(\) {}括起来的形式,以逗号分隔的list. {a,b}.js:匹配a.js&b.js !与当前的命中形式取反4、剖析Grunt Tasks - grunt serve(一)
(1)、安装指令
yo webapp grunt-web-app grunt serve --allow-remote 允许远程IP访问,同局域网访问命令;
grunt serve只能localhost和127.0.0.1访问;5、剖析Grunt Tasks - grunt serve(二)
(1)、grunt wiredep:自动把Bower的组件注入到HTML文件中
(2)、tasks:['newer:copy:styles'] 只拷贝新增及修改的文件到目标文件6、剖析Grunt Tasks - grunt test
7、剖析Grunt Tasks - grunt build(一)
时间戳和版本号的不足 1.时间戳和版本号比较粗犷,如果文件内容没有修改,也会发起http请求,浪费一次资源请求。 2.对于大型网站,发布过程中存在文件下载混乱的问题(新文件配 旧文件) 3.CDN供应商为了节省成本降低带宽流量,不会及时去取新的文件,导致更新失败 md5: 因为md5重命名了文件(新文件),就可以解决2,3问题
8、剖析Grunt Tasks - grunt build(二)
9、gulp
npn install -g gulp安装 gulp -v查看版本 mkdir gulp-in-action创建目录安装gulp-webapp生成器,并用gulp-webapp创建项目 基于国内网络问题推荐使用cnpm进行安装 cnpm install -g generator-gulp-webapp
gulp有四个基本API: (1). gulp,task(str,arr,function) (2). gulp.src(路径),对应grunt的src配置项 (3). gulp.dest(路径),对应grunt的dest配置项 (4). gulp.watch()