前端开发神器WebStorm--自动化工作流Grunt(02)

为何要用构建工具?

一句话:自动化

对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。

当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

Grunt这货是啥?

最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com

为什么使用Grunt?

使 用Grunt的最大好处在于它带给团队的一致性。如果你曾经多人合作完成工作,你就会知道代码中的不一致性是多么令人抓狂。Grunt 使得团队能够使用一组标准化的命令来工作,因此确保了团队中的每个成员都以相同的标准编写代码。毕竟,没有什么比由于代码不一致导致运行失败更加让人痛苦 的事情了。

Grunt 同时也拥有人数日益增多的开发者社区,以及越来越多的新插件。学习使用 Grunt 的门槛非常低因为很多的工具以及自动化任务都已经可以被使用了。

如何使用Grunt

1 官方文档:http://gruntjs.com/getting-started

2 中文文档:http://www.gruntjs.net/docs/getting-started/

当对Grunt有基本了解之后,请阅读下一篇

前端开发神器WebStorm--自动化工作流Grunt(02)

时间: 2024-10-25 05:51:29

前端开发神器WebStorm--自动化工作流Grunt(02)的相关文章

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.

前端开发神器WebStorm--Grunt 搭建环境(03)

通过上一篇前端开发神器WebStorm--自动化工作流(前言),相信大家都Grunt自动化工具有了初步了解. 接下来我就以WROC3000 web为原型,演示一下如何使用Grunt工具提高工作效率,最大程度压缩代码. 1.首先安装node环境 进入官网 下载安装.(记住安装目录) 检测安装成功方法:打开CMD窗口,输入 node --version 会打印出安装的版本号,说明已经安装成功. 2.安装 Grunt 客户端 在CMD 窗口中,切换到node安装盘符,会自动切换到nodejs安装目录.

打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环

打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环 2013-05-16 14:39:15 将Sublime Text打造成如Eclipse一般的前端开发IDE 1. 快捷键移植篇   从Java开始的梦, 到如痴如醉的Front End, 却始终摆脱不了Eclipse的束缚.   对于Javaer, Eclipse是非常不错的选择, 但对于单纯的前端而言, 是不是觉得略显笨重, 其中各种不想要的东西, 反正是诸多不爽, 曾用过Eclipse来做前端的人应该都有

前端开发神器:Emmet

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的神器,让你飞一般地编写HTML和CSS代码. 官网:http://docs.emet.io/ 1. > 表示 后代 ul>li>a <ul> <li><a href=""></a></li> </ul> 2. + 表示 兄弟 div>h2+p <div> <h2></h2> &l

Sublime Text 使用指南 - 前端开发神器

Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的是如何使用sublime Text藏在菜单里的一些功能,这些功能十分强大,却因隐藏的较深不太被大家关注,网上相关的介绍文章也不太多,这里就整理一下. Sublime Text 功能使用介绍,目录: Nodejs build System Multiple Selections Project & W

前端开发神器 - Brackets

做了几年的 .Net 项目开发,后来公司转 Java 语言开发,Java 做了还没一年,公司准备前后端分离开发,而我被分到前端! Brackets是一款基于web(html+css+js)开发的web前端编辑器.它有许多普通编辑器难以实现的功能,是web前端开发者的神器. Brackets官网下载:http://brackets.io/ 其功能如下: 1.快速编辑将光标定在颜色上,按下快捷键Ctrl+E即可编辑颜色. 将光标定在标签或者class或者id上,Brackets就会搜索整个目录下的c

前端开发环境webstorm搭建

1. 下载node.js https://nodejs.org/en/ 2. 安装 webpack 用管理员开个命令行 (mac: open terminal) npm install webpack -g 3. 下载webstorm https://www.jetbrains.com/webstorm/ 注册:http://idea.qinxi1992.cn/ 4. 进入项目path 输入(拖入path到terminal) npm install 会自动帮你把所有依赖全部安装 5. 调试.发布

前端开发利器webStorm /phpStorm

合适的工具会事半功倍,当然也得把握分寸,要不就成了会得越多干的越多的“苦力者”.编辑类软件层出不群,各有所长,各有所短.找到一个合适的还真是难.还好有webstorm的出现,最近又是3.0的新版本发布.为什么这么说呢,她与其它的编辑器有什么不同:1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的米号的. 换句话说,所有的操作都直接存储,这样带来的坏处就是,没有以前的米号标识,万一键盘误操作也会被立即存储.

前端开发神器sublime Text

实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少,用了就知道了. 插件介绍 Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installation 安装方法: CTRL+` ,出现控制台 粘贴以下代码至控制台 ST2