Yeoman(Yo、Grunt、Bower),node.js学习笔记
来源:互联网 发布:汽车行业数据 编辑:程序博客网 时间:2024/05/01 10:05
npm 包下载很慢的解决办法1.通过config命令npm config set registry http://registry.cnpmjs.org npm info underscore(如果上面配置正确这个命令会有字符串response)2.命令行指定全选复制放进笔记npm --registry http://registry.cnpmjs.org info underscore3.编辑node_modules\npm.npmrc加入下面内容registry = http://registry.cnpmjs.org如果上面的npm地址不行的话,大家可以试试淘宝的npm,非常稳定:这个也是网上搜的,亲自试过,非常好用!镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):1.通过config命令npm config set registry https://registry.npm.taobao.org npm info underscore (如果上面配置正确这个命令会有字符串response)2.命令行指定npm --registry https://registry.npm.taobao.org info underscore 3.编辑 ~/.npmrc 加入下面内容registry = https://registry.npm.taobao.orgnpm常用命令npm install xxx 安装模块npm install xxx -g 将模块安装到全局环境中 参考http://goddyzhao.tumblr.com/post/9835631010/no-direct-command-for-local-installed-command-line-modulnpm ls 查看安装的模块及依赖npm ls -g 查看全局安装的模块及依赖npm uninstall xxx (-g) 卸载模块npm cache clean 清理缓存
今天终于在Win7环境下完成了NodeJs、Yo(来自Yeoman的脚手架工具)、Grunt(构建工具)、Bower(包管理工具)的安装和简单部署,虽然只是前端工程化的一小步,但是已让我有点小兴奋。O(∩_∩)O哈哈~再也不用到YUI Compressor上去压缩JS&CSS;再也不用把png图片一个个拖到TinyPNG进行在线压缩(和熊猫哥哥说再见了);再不用把JPG/JPEG图片拖 JPEGMini(这个软件花了$19.99购买)软件里面压缩如下便是我今天的小小尝试:安装NodeJs从NodeJs官网下载安装包 http://nodejs.org/ 直接进行安装,相信很快就能完成安装安装Yo、Grunt、Bower直接打开NodeJs的命令行界面输入如下代码:(“-g” 代表全局安装)npm install -g grunt-cli bower安装完成后,进入基本的脚手架安装为了搭建一个web应用脚手架,你将需要安装generator-webapp生成器:npm install -g generator-webapp这是默认的web应用生成器,它将搭建一个项目脚手架包括HTML5 Boilerplate,jQuery,Modernizr,还有Bootstrap。在交互的提示中你可以选择不包含它们中的一些。现在生成器已经安装好了,为你的项目创建一个新的目录,mkdir my-yo-projectcd my-yo-project然后运行:yo webapp每一个由yo创建的项目也将会pull相关的Grunt任务,这些任务是社区认为对你的工作流是需要的或者有用的。对于web应用来说,这个webapp生成器被认为是最简单可行的一个开始。它也提供了一些框架生成器,它们可以被用来搭建项目脚手架以及之后的视图,模型,控制器等等。上面一段基本来自Yeoman的中文文档,详细的内容可以到该网站去了解。如上,只要一步一步进行就可以了,基本上不会有错误。接着,你需要测试下你的工具是否安装正确:运行如下命令:grunt server这实际上是运行你的站点,中间会出现找不到“Imagemin”,但程序仍然会继续运行到:默认浏览器弹出:http://localhost:9000/这证明你的安装没有问题。“Imagemin”的问题,我们还没有解决,这是一个相当给力的压缩插件,能对JPEG&PNG进行非常高压缩比的压缩,只需要运行命令行,一步完成所有图片压缩(妈妈再也不用担心你做重复工作了)。安装 imagemin 插件命令行下切换到你的项目文件夹,cd projectName输入以下命令进行安装:npm install grunt-contrib-imagemin --save-dev配置压缩图片任务接下来配置 Gruntfile.js (这个文件可在你的项目文件夹找到),定义优化图片大小的任务:module.exports = function (grunt) { 'use strict'; grunt.initConfig({ imagemin: { dist: { options: { optimizationLevel: 3 //定义 PNG 图片优化水平 (1) }, files: [{ expand: true, cwd: '<%= config.app %>/images', // 优化 img 目录下所有 png/jpg/jpeg 图片 src: '{,*/}*.{gif,jpeg,jpg,png}', dest: '<%= config.dist %>/images' // 优化后的图片保存位置,覆盖旧图片,并且不作提示 }] } }, }); grunt.loadNpmTasks('grunt-contrib-imagemin'); (2) grunt.registerTask('img', ['imagemin']); (3)};<%= config.app %>/images 指的是你的项目目录app/images<%= config.dist %>/images 指的是你的项目目录dist/images实际上别的都不用管,只需要添加以上代买的(1)(2)(3),自己看一看,你就知道它们应该放到Gruntfile.js的哪个位置了。接下来运行命令:grunt imagemin你的图片立马被压缩了,我用原来方法JPEGmini压缩的一张图199KB,用该命令行运行压出来却是154KB,感觉很给力。图片压缩的比率非常可观。之后再使用 Google PageSpeed (需要翻墙进入)工具检测,就不再提醒我们压缩图片。整个过程其实还是很简单的,但是如果你是第一次,可能会有些小负担,所以动手试试,不要让小问题阻挡了你的进步。哈哈,其实以上都是来自百度,如下是我觉得比较有用的站点汇总,你可以进一步学习。Yeoman中文文档:http://yeomanjs.org/gettingstarted.htmlGrunt中文:http://www.gruntjs.org/docs/getting-started.html(这个貌似翻墙会更流畅)Grunt中批量无损压缩图片插件安装-Grunt-contrib-imagemin:http://handyxuefeng.blog.163.com/blog/static/45452172201391415246847/Bower介绍:http://blog.javachen.com/2014/05/10/bower-intro/不要再让自己作为前端工程师Out了,行动起来!O(∩_∩)O哈哈~
0 0
- Yeoman(Yo、Grunt、Bower),node.js学习笔记
- Yeoman(Yo、Grunt、Bower),node.js学习笔记
- 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装
- 在ubuntu下安装yeoman--Installing yeoman(grunt, bower and yo) on Ubuntu
- bower grunt yeoman
- Yeoman & Grunt & bower
- 安装Yeoman + Bower + Grunt 创建angularjs 项目结构(新手笔记一)
- Yeoman Grunt Bower配置相关
- yeoman、bower、grunt 开发收集
- Yo(Yeoman)
- 使用yo bower grunt 写angularjs项目
- yeoman-bower-grunt之间的关系
- 前段自动化工具grunt bower yeoman安装
- 【node.js学习】--(5)--Bower
- 前端项目工程化(yo+grunt/gulp+bower)
- Windows下Yeoman+Grunt+Bower快速搭建AngularJS开发环境
- 前端工程化开发之yeoman、bower、grunt
- 解决node.js安装cnpm、grunt、bower出现的不是内部或外部命令问题
- WordPress批量修改文章内容、URL链接、文章摘要
- Tribon图层的理解
- 列表解析式与生成器表达式
- Java return和finally执行顺序
- ViewPager的使用
- Yeoman(Yo、Grunt、Bower),node.js学习笔记
- 线程和进程
- Ubuntu桌面生存指南 --- Ubuntu常用效率软件简介
- 手机新闻阅读网站开发心得
- ECshop 数据库表结构
- ios瀑布流
- JSP页面数据传到另外一个JSP页面
- Android学习 游戏开发之打地鼠(二,游戏设计和主界面设计)
- BZOJ 1670: [Usaco2006 Oct]Building the Moat护城河的挖掘|二维凸包