Grunt - 安装指南
发现周围有些人对前端存在偏见。
他们认为前端只是用没那么复杂的技术对着界面调来调去,一点点打磨,最后做出一个没什么实用价值的“花瓶”。
其实,前端的技术栈并不简单,比如我们可以用Grunt进行一些自动化操作。
这里简单记录下Grunt的安装,希望对大家有帮助。
Node.js
我们用到的很多组建都是依赖Node.js构建的,所以首先要安装Node.js。
安装Node.js几乎没什么难度,可以直接进Node.js的官网,或者使用brew
,apt-get
,yum
等进行安装。
安装结束后,执行一下命令,检查输出是否正确:
$ node --version
v0.12.7
npm
会跟着Node.js安装进来,我们需要经常执行npm install
之类的操作。
所以如果之前没有解除过npm
,你可能需要过一次Getting Started。
Grunt
进入Grunt的官网看到一头野猪,Grunt将自己定义为Javascript Task Runner,而我们通过Grunt执行的就是一个个task。
先install再说,注意是grunt-cli
npm install -g grunt-cli
看看是否成功安装
Ezra:~ Kavlez$ grunt --version
grunt-cli v0.1.13
该怎么用起来呢?这里列出简单步骤。
创建一个目录,在这个目录下试试
mkdir my-grunt
cd my-grunt执行
npm init
来创建package.json,会出现一些填写选项的提示,接着执行npm install
来安装需要的组件即可,比如:npm install grunt-contrib-uglify --save-dev
执行
vim package.json
查看,会发现grunt-contrib-uglify呗加入到了配置文件中"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.9.2"
}package.json并不是用来配置任务的,我们要在Gruntfile.js中配置任务,比如这样:
module.exports = function(grunt) { grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'omg.js',
dest: 'omg.min.js'
}
}
}); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']); };grunt-contrib-uglify可以用来压缩源文件,我们创建一个omg.js并写入以下内容来试试uglify:
'use strict'; function omg(){
alert('omg!!!!!!');
}执行任务! 如果顺利的话,我们可以在目录下看到omg.min.js。
grunt uglify
仅靠一头野猪,我们仍无法避免一些重复的操作。
于是我们需要别的小伙伴,比如一只鸟。
Bower
Bower就是那只鸟,我是说logo。
Bower在官网做了如下介绍:
Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
也就是为我们管理各种各样的依赖,比如框架、库、工具等。
安装方法依然简单,直接npm
$ npm install -g bower
安装结束后,查看版本检查是否成功
$ bower -v
1.5.1
使用方法非常简单,这里简单举个例子,比如我们要在工程中引入一个backbone:
$ bower install backbone
bower是如何根据名称找到backbone的? 我们可以到http://bower.io/search/看看。
backbone是使用"backbone"这个名字在bower进行注册的。
此外,我们还有以下几种方式引入依赖:
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js
你可能会有这样的疑问,npm 和 bower都可以做依赖管理,那它们的区别是什么?
这里,我引用下stackoverflow的答案:
npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify and/or $ npm dedupe.
Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).
A nested dependency tree means that your dependencies can have its own dependencies which can have their own, and so on. This is really great on the server where you don't have to care much about space and latency. It lets you not have to care about dependency conflicts as all your dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end. Imagine a site having to download three copies of jQuery.
The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc.
All package managers have many downsides. You just have to pick which you can live with.
相信这段答案会在使用npm
和bower
过程中更有体会 :D
答案中提到了Yeoman,这是干什么用的?
Yeoman
yeoman整合了最佳实践和常用工具。
创建项目时,我们可以用来生成项目文件、代码结构。
直接使用npm
直接进行安装,注意这里的名字是yo,而不是yoeman。
$ npm install -g yo
可能并不顺利。
看到有些朋友建议使用sudo
执行安装,事实上这样会带来一些权限问题,比如一些模块会无法加载,或者每次执行一些命令时都需要加上sudo
。
我们可以参考 https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md来解决这个问题。
在此简单引用下这个帖子的内容,过程如下:
$ mkdir "${HOME}/.npm-packages"
在.bashrc(或者可能是.bash_profile)加入以下代码:
NPM_PACKAGES="${HOME}/.npm-packages"
NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"
PATH="$NPM_PACKAGES/bin:$PATH"
# 根据自己的情况设置manpath
unset MANPATH
MANPATH="$NPM_PACKAGES/share/man:$(manpath)"
在.npmrc加入以下代码:
prefix=~/.npm-packages
最后,不要忘了source
:
$ source ~/.bashrc
如果是使用brew安装node,可能会出现其他问题,比如:
http://yeoman.io/learning/faq.html#yo-command-not-found
https://github.com/yeoman/yeoman/issues/466#issuecomment-8602733
如果出现提示:
sh: yodoctor: command not found
可以执行以下命令解决:
$ npm config set unsafe-perm true
Yeoman有个东西叫generator,我们可以让Yeoman根据特定的generator生成相应的工程。 http://yeoman.io/generators/中为我们列出了目前可用的generator。
这里以列表中的第一条——AngularJS的generator为例,简单记录下使用步骤。
首先安装generator,列表中AngularJS的generator名称为angular,在名称前面加上generator_便是在npm中注册的名称。
npm install -g generator-angular
为自己的工程创建一个目录并进入。
mkdir yo-my-angular
执行一下
yo
,开始生成。yo angular yo-my-angular
Yeoman会提示以下一些问题,根据需要选择即可,剩下的便是稍等片刻。
? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? (Press <space> to select)如果执行正常,Yeoman最后会提示Done, without errors.
当然,我们可以忽略Yeoman,而直接使用Grunt,并一点点编写相关任务的配置。
我们可能只是需要一些简单的功能,但Yeoman提供的最佳实践会给我们带来更多的启发,谁会跟更好的方法过不去呢?
Grunt - 安装指南的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
随机推荐
- Win(Phone)10开发第(2)弹,导出APPX包并签名部署
当我们新建一个win10 uap项目,如果想导出测试包,需要点击项目名称,选择商店-导出应用包,这个时候会生成一个文件夹,包含appx和ps1等文件. powershell运行Add-AppDevPa ...
- 简单了解 iTextSharp实现HTML to PDF
查了下 转PDF的各种框架 发现大部分都是收费的. 发现一款免费的iTextSharp 就想玩一下 只是简单做个HTML 转PDF 没有过深的探究. 首先 我在项目中引入iTextSharp ...
- 【slenium专题】Webdriver同步设置
Webdriver同步设置常用等待类主要如下图所示 注:support.ui包内类主要实现显性等待功能,timeouts()内方法主要实现隐性等待功能 一.线程休眠 Thread.sleep(long ...
- java入门——面向对象
简介 对象具有自己的状态和行为: 描述一个对象具有什么状态和行为的过程叫做建模,不同的意图下我们对同一个事物的描述会产生不同的模型. 类 类描述一类对象的状态和行为的模板.可以把类想象成一个汽车设计图 ...
- Weekly Contest 131
1021. Remove Outermost Parentheses A valid parentheses string is either empty (""), " ...
- Python 断言 assert 的用法
assert 后边接的表达式的返回值必须是布尔值 assert expression, "对错误的描述信息" 如果expression表达式返回的是True, 程序正常执行, 如果 ...
- Storm Trident状态
Trident中有对状态数据进行读取和写入操作的一流抽象工具.状态既可以保存在拓扑内部,比如保存在内容中并由HDFS存储,也可以通过外部存储(比如Memcached或Cassandra)存储在数据库中 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
- MiniUi-----Spinner 数值调节器(可以实现任意值的递增)
Spinner 数值调节器可以实现任意值的递增,每次的递增值主要是通过increment="递增值"属性来控制的. 属性 该属性扩展自验证框(validatebox),下面是为微调 ...
- linux安装应用程序
实验:为 Linux 主机安装应用程序 环境:vmware workstation 14 . redhad-server-6.4 需求:1.使用 RPM 包的方式安装 Mozilla Firef ...