前端工程化
2015-07-04 20:02
369 查看
发这篇文章的理由是:今天终于在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的命令行界面
输入如下代码:(“
安装完成后,进入基本的脚手架安装
为了搭建一个web应用脚手架,你将需要安装generator-webapp生成器:
这是默认的web应用生成器,它将搭建一个项目脚手架包括
现在生成器已经安装好了,为你的项目创建一个新的目录,
然后运行:
每一个由
对于web应用来说,这个webapp生成器被认为是最简单可行的一个开始。它也提供了一些框架生成器,它们可以被用来搭建项目脚手架以及之后的视图,模型,控制器等等。
上面一段基本来自Yeoman的中文文档,详细的内容可以到该网站去了解。
如上,只要一步一步进行就可以了,基本上不会有错误。
接着,你需要测试下你的工具是否安装正确:运行如下命令:
这实际上是运行你的站点,中间会出现找不到“Imagemin”,但程序仍然会继续运行到:默认浏览器弹出:
http://localhost:9000/
这证明你的安装没有问题。
“Imagemin”的问题,我们还没有解决,这是一个相当给力的压缩插件,能对JPEG&PNG进行非常高压缩比的压缩,只需要运行命令行,一步完成所有图片压缩(妈妈再也不用担心你做重复工作了)。
安装 imagemin 插件
命令行下切换到你的项目文件夹,
输入以下命令进行安装:
配置压缩图片任务
接下来配置
实际上别的都不用管,只需要添加以上代买的(1)(2)(3),自己看一看,你就知道它们应该放到
接下来运行命令:
你的图片立马被压缩了,我用原来方法JPEGmini压缩的一张图
PageSpeed (需要翻墙进入)工具检测,就不再提醒我们压缩图片。
整个过程其实还是很简单的,但是如果你是第一次,可能会有些小负担,所以动手试试,不要让小问题阻挡了你的进步。
哈哈,其实以上都是来自百度,如下是我觉得比较有用的站点汇总,你可以进一步学习。
Yeoman中文文档:http://yeomanjs.org/gettingstarted.html
Grunt中文: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哈哈~
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-project
cd 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.html
Grunt中文: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哈哈~
相关文章推荐
- js地址下拉列表中全职工作
- node C++扩展(2) 尝试翻译node官网文档
- HTML标签head详解
- JavaScript怎么提交表单!!!
- 前端解决方案:bower实践
- angularJS 作用域
- js获取锚点名称 #
- mysql-5.6 Slave支持crash-safe
- css3动画特效:纯css3制作win8加载动画特效
- js控制的多级下拉菜单
- JSON解析
- CSS3新功能简要
- avalonjs 实现简单购物车
- zepto在安卓下使用swipe, swipeLeft, swipeRight 无效解决
- node.js C++ 扩展
- JavaScript中的this陷阱的最全收集
- javascript prototype详解
- 第014讲 CSS 定位
- Angularjs简介
- html5开发之viewport使用