yeoman再次回顾的笔记总结及注意事项

原创 Cherise 随笔 开发工具 237阅读 2017-05-02 12:22:03 举报

很多东西,一开始接触学习时感觉会了,但是一段时间不用,再回来看的时候,发现又陌生了,还是要经常性的温故而知新一下下。
今天因为要开始一个简单的新项目,我就想到了yeoman,却发现不是很熟悉了。就再再原先yeoman安装详解的基础上补漏,以及添加一些注意事项。
首先,再次整体了解一下yeoman:
yeoman是Google领头开发的一个前端构建工具,它的目的是为了给新项目建立一个完整的工作流,让开发人员可以专注于解决问题而不是担心那些不必要的小事情。
首先yeoman由三部分构成:脚手架工具yo、构建工具gulp/grunt、包管理工具npm/bower。在yeoman的基础上还需要配置对应的项目生成器(generators)才能愉快的生成一个项目。
(一) yo(脚手架): Yeoman的核心工具,yo是一个项目初始化工具,可以生成一套启动某类项目必须的项目文件。
yo全局安装语句:npm install --global yo
(二) Bower(包管理器):一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如javascript、HTML、CSS之类的网络资源,概念上类似于npm,npm专注于nodeJS模块,而bower专注于CSS、JavaScript、图像等前端相关内容的管理。需要注意的是,Bower的运行,依赖于版本控制工具git,从github拉取依赖信息。
bower全局安装语句:npm install --global bower
(三)Grunt/gulp(构建工具): GruntJS是基于javascript的命令行构建工具,他可以帮助开发者们自动化重复性的工作。
Grunt-cli只是一个命令行工具,用来执行,而不是Grunt这个工具本身
grunt-cli安装语句:npm install --global grunt-cli
grunt的安装(需进入项目本地安装):npm install grunt --save-dev(虽好使用grunt, gulp使用时,某些文件的引入配置可能存在问题)
gulp全局安装:npm install gulp -g
“—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项。
npm install 用于批量安装,所安装的插件见package.json中的依赖项

Yeoman提供generator(生成器)系统,一个generator是一个插件,在我们在一个完整的项目上使用‘yo’命令时,会运行该generator。通过这些官方的Generators,推出了Yeoman工作流,工作流是一个健壮、有自己特色的客户端堆栈,包含能快速构建漂亮的网络应用的工具和框架。Yeoman提供了负责开始项目开发的一切,没有任何让人头痛的手动配置。
安装生成器generator有两种方式
一、若不知道生成器名字,可使用yo命令搜索并安装(可能会存在网络不通畅,安装很慢的问题)
二、若知道生成器名字,则可使用npm安装:npm install -g generator-angular
搭建angular项目可参考网站(很详细):http://blog.jobbole.com/65399/

npm安装时网络不畅的解决方法——淘宝镜像
三种使用方法:

  1. 通过config命令
    html 代码
  1. 命令行指定
    html 代码
  1. 编辑 ~/.npmrc 加入下面内容
    html 代码
  1. 安装cnpm
    html 代码

==================bower详细介绍===================
如果我们安装的东西比较小众,在bower中并没有注册,
bower还提供了以下的安装方式:

  1. 通过github的短写安装。前边是注册账号的名字,后面是项目的名字,eg: bower install jQuery/jquery --save-dev
  2. 还可以使用项目完整的地址
  3. 如果没有在GitHub上立项,我们也可以直接通过URL安装
    • bower init 生成bower.json这个文件
    • bower只负责安装对应的包,却不负责引入到文件中,需要手动一个个引入,不过可以配合grunt或gulp来解决这个问题

==================关于npm杂七杂八==================
执行命令cnpm init 来新建package.json
执行 cnpm install gulp -g全局安装gulp
执行cnpm install gulp --save-dev 本地安装gulp
(全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能)
*新建无名文件的命令:type NUL > .log

  • 当拷贝一个项目过来后,Cannot find module 'coffee-script'问题的解决:
    首先,删除node_module目录
    其次,npm cache clean
    最后,npm install

================grunt详细介绍======================================
关于grunt常用插件介绍:

  1. javascript语法错误检查:Contrib-jshint
  2. 清空文件、文件夹:Contrib-clean
  3. 复制文件、文件夹:Contrib-copy
  4. Scss编译:grunt-contrib-sass
  5. 压缩文件:grunt-contrib-uglify
  6. 监听文件变动:grunt-contrib-watch
  7. 建立本地服务器:grunt-contrib-connect
  8. 前端自动化测试工具:karma
  9. grunt-wiredep 用于查找你的组件(在brow.json中)并将其直接注入到你指定的HTML文件中。
  10. 为CSS语句加上浏览器前缀:grunt-autoprefixer
  11. 检查HTML语法:grunt-htmlhint

配置 Gruntfile.js 的语法:
所有的代码要包裹在module.exports = function(grunt) {};里面
与 Grunt 有关的主要有三块代码:任务配置代码、插件加载代码、任务注册代码。
(1) 任务配置代码:
html 代码

*具体的任务配置代码以对象格式存放在grunt.initConfig函数里面;
*pkg:grunt.file.readJSON('package.json')功能是读取package.json文件,并把里面的信息获取出来,方便在后面的任务中使用,这样可以提高灵活性;
*uglify对象,这个名字是固定的,表示下面的任务是调用uglify插件的,首先配置了全局的options然后新建了一个build任务;
*至于怎么写出来options里面的参数和build里面的参数内容,这才是grunt学习的难点,你需要查看每个插件的用法,根据用法来编写任务。

(2) 插件加载代码:
html 代码

(3) 任务注册代码:
html 代码

*上句的意思是,你在default上面注册了一个uglify任务,default就是别名,它是默认的task,当你在项目目录执行grunt的时候,它会执行注册到default上面的任务。
**html 代码**
*上句执行需使用‘grunt_compress’,这条task的任务是uglify下面的build任务
*这里需要注意的是,task的命名不能与后面的任务配置同名,也就是说这里的 compress 不能命名成 uglify,这样会报错或者产生意外情况
  • 命令行执行某个模块使用 grunt [module]
  • 命令行执行某个任务 grunt [task]
    html 代码

关于上面语句的解释:

  • grunt.initConfig方法用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。
    这里由于我们要配置的是cssmin模块,所以里面有一个cssmin成员(属性)
  • cssmin(属性)指向一个对象,该对象又包含多个成员。除了一些系统设定的成员(比如options),其他自定义的成员称为目标(target),上面的代码里面,cssmin模块共有两个目标,一个是“minify”,用于压缩css文件;另一个是“combine”,用于将多个css文件合并一个文件。
  • 每个目标的具体设置,需要参考模块的文档。
    就cssmin来讲,minify目标的参数具体含义:
    -expand:如果设为true,就表示下面文件名的占位符(即号)都要扩展成具体的文件名。
    -cwd:需要处理的文件(input)所在目录。
    -src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
    -dest:表示处理后的文件名或所在目录。
    -ext:表示处理后的文件后缀名。
    *除了上述这些还有一些参数也是grunt所有模块通用的:
    -filter:一个返回布尔值的函数,用于过滤文件名。只有返回值为true的文件,才会被grunt处理。
    -dot:是否匹配以点号(.)开头的系统文件。
    -makeBase:如果设置为true,就只匹配文件路径的最后一部分。比如,a?b可以匹配/xyz/123/acb,而不匹配/xyz/acb/123。

==============yeoman创建angular项目流程===========

  1. 全局安装yeoman相应工具(yo、bower、grunt);
  2. 全局安装生成器generator——angular;
  3. 创建项目文件夹并执行yo angular;
  4. 修改项目中相关配置文件
  5. 项目中本地安装grunt(npm install grunt --save-dev)
  6. npm install
  7. bower install
  8. grunt serve运行在浏览器中查看(启动服务后,每次保存后,浏览器会自动刷新)
  9. 安装时使用–save更新bower.json文件
    • grunt-wiredep是一个Grunt插件,用于查找你的组件(在brow.json中)并将其直接注入到你指定的HTML文件 中。
      *为了使用bower.json文件中的依赖库,需要在你想注入代码库的HTML文件中包含如下注释代码块
      <!-- bower:js -->
      <!-- endbower -->
      <!-- bower:css -->
      <!-- endbower -->
    • 同时建立相应的任务
      html 代码
  • grunt-bowercopy会自动帮你提取Bower下载的包里需要的文件并拷贝到你指定的路径去。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复