祝贺我成为前端啦!~~从年前得小测试到今年得前端,成功转型!我真是一个进步得好青年,好少女!

这两天出去受虐,面了两家前端,表现非常不好,还是回到我现在得公司好好沉淀技术,做前端,要经常性得整理总结,才是王道嘛!我要在现在得公司认真工作每一天,把自己得技术水平多多提高,明年一定出去有底气得挑工作!有了能力才能撑得起那么多得报酬,脊背才会直硬!、

废话不多说,如何mac下安装grunt来也。。。

 Q:为何要用构建工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:

  • 压缩文件
  • 合并文件
  • 简单语法检查

安装homebrew任务管理器

下载homebrew很简单,只需要用下面得ruby语句,在官网中介绍了homebrew得用法。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

url: http://brew.sh/      是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件, 只需要一个命令, 非常方便。

下面若有安装不成功,可前面加sudo ,以管理员身份安装。

安装NodeJS

运行grunt得首要条件是你的系统上运行安装了NodeJs和NPM,简单了解下安装NodeJs和NPM。

可以到官网下载NodeJs : https://nodejs.org/en/

也可以在终端以命令行形式安装:

$ brew install node

安装NPM

在终端执行下面的命令安装NPM

curl http://npmjs.org/install.sh | sh

检查NodeJs和NPM有没有安装完成

$ node -v

v0.12.6

$ npm -v

2.11.2

安装grunt

若以前安装过grunt,要先卸载以前版本得grunt,再升级新版本。

$ npm uninstall -g grunt

为了方便使用Grunt,要全局范围安装grunt得命令行接口CLI。

$ npm install -g grunt-cli
成功后:

grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli

├── resolve@0.3.1

├── nopt@1.0.10 (abbrev@1.0.7)

└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)

这条命令会把grunt 命令移植在你得系统路径中,这样就允许你从任意目录中运行grunt命令。

安装了grunt-cli,不意味着安装了grunt任务运行器,Grunt CLI的工作很简单:在Gruntfile所在目录调用运行已安装好的相应版本的Grunt。这就意味着可以在同一台机器上同时安装多个版本的Grunt。

CLI如何工作

每次运行grunt时,它都会使用node的require()系统查找本地已安装好的grunt。正因为如此,你可以从你项目的任意子目录运行grunt

如果找到本地已经安装好的Grunt,CLI就会加载这个本地安装好的Grunt库,然后应用你项目中的Gruntfile中的配置(这个文件用于配置项目中使用的任务,Grunt也正是根据这个文件中的配置来处理相应的任务),并执行你所指定的所有任务。

读下面源码了解工作原理:

#!/usr/bin/env node

'use strict';

process.title = 'grunt';

// Especially badass external libs.
var findup = require('findup-sync');
var resolve = require('resolve').sync; // Internal libs.
var options = require('../lib/cli').options;
var completion = require('../lib/completion');
var info = require('../lib/info');
var path = require('path'); var basedir = process.cwd();
var gruntpath; // Do stuff based on CLI options.
if ('completion' in options) {
completion.print(options.completion);
} else if (options.version) {
info.version();
} else if (options.gruntfile) { //Note: if both `gruntfile` and `base` are set, use `gruntfile`
basedir = path.resolve(path.dirname(options.gruntfile));
} else if (options.base) {
basedir = path.resolve(options.base);
} try {
gruntpath = resolve('grunt', {basedir: basedir});
} catch (ex) {
gruntpath = findup('lib/grunt.js');
// No grunt install found!
if (!gruntpath) {
if (options.version) { process.exit(); }
if (options.help) { info.help(); }
info.fatal('Unable to find local grunt.', 99);
}
} // Everything looks good. Require local grunt and run it.
require(gruntpath).cli();

安装指定版本的Grunt

要安装指定版本的Grunt或者Grunt插件,可以运行:

$ npm install grunt@VERSION --save-dev  

$ sudo npm install -g grunt   全局安装

成功后

grunt@0.4.5 /usr/local/lib/node_modules/grunt

├── which@1.0.9

├── dateformat@1.0.2-1.2.3

├── eventemitter2@0.4.14

├── getobject@0.1.0

├── colors@0.6.2

├── rimraf@2.2.8

├── async@0.1.22

├── hooker@0.2.3

├── grunt-legacy-util@0.2.0

├── exit@0.1.2

├── lodash@0.9.2

├── nopt@1.0.10 (abbrev@1.0.7)

├── coffee-script@1.3.3

├── underscore.string@2.2.1

├── iconv-lite@0.2.11

├── minimatch@0.2.14 (sigmund@1.0.1, lru-cache@2.6.5)

├── grunt-legacy-log@0.1.2 (grunt-legacy-log-utils@0.1.1, underscore.string@2.3.3, lodash@2.4.2)

├── glob@3.1.21 (inherits@1.0.2, graceful-fs@1.2.3)

├── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)

└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)

其中VERSION就是你所需要的版本(指定版本号即可)。这样会安装指定版本的Grunt或者插件,并将它作为你的项目依赖添加到package.json

检查一下grunt是否安装成功:

$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5

要正确运行Grunt项目,必须依赖于package.jsonGruntfile.js文件,因此我们紧接下来需要在项目的根目录下创建这两个文件:

$ touch package.json Gruntfile.js

我们常常安装Grunt和Grunt插件的方法和上面的是反过来的,先创建package.json文件中添加所需要的Grunt或Grunt插件,比如说现在需要在项目中添加一个Grunt的插件Sass,我们先在package.json文件中的devDependencies中添加相关的依赖关系,如果同时安装多个Grunt插件时,一条一条这样执行似乎很是麻烦,其实还有一种更好的方式,先在package.json文件中添加需要的Grunt插件依赖关系:

{
"name":"install-grunt",
"description": "Example project to demonstrate Grunt.",
"version":"0.1.0",
"private": true,
"author": {
"name": "w3cplus",
"email": "w3cplus@hotmail.com"
},
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-sass":"*",
"grunt-contrib-jshint":"*",
"grunt-contrib-uglify":"*",
"grunt-contrib-watch":"*"
}
}

添加完所需的依赖关系之后,可以在终端执行:

$ npm install
installGrunt |----Gruntfile.js |----node_modules |----+----grunt |----+----grunt-contrib-jshint |----+----grunt-contrib-sass |----+----grunt-contrib-uglify |----+----grunt-contrib-watch |----package.json

就可以一次性安装package.json文件中所声明的依赖关系的grunt插件。同时会在你项目的根目录下添加一个node_modules目录,目录中会放置对应grunt插件所需的插件目录名。

更多详细内容可参考:

http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html

http://www.cnblogs.com/yexiaochai/p/3594561.html

根据上面得内容我把grunt在本地mac机中安装成功了!

MAC终端安装grunt--javascript世界得构建工具的更多相关文章

  1. 【转】mac终端安装node时候,显示“-bash: brew: command not found”,怎么解决?

    原文网址:https://segmentfault.com/q/1010000004221389/a-1020000004221408 mac终端安装node时候,显示“-bash: brew: co ...

  2. MAC终端安装指定版本node

    MAC终端安装指定版本node 安装brew 终端上运行 $ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Home ...

  3. 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用

    关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用   工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...

  4. Grunt 一个专为JavaScript提供的构建工具

    新手最好找个视频来看看, Grunt的配置及使用(压缩合并js/css) - 每天都记录一点点! - CSDN博客https://blog.csdn.net/playboyanta123/articl ...

  5. mac终端安装webpack的时候报错Err,解决的办法 sudo npm install webpack -g

    MacBook-Air:~ xxx$ npm install webpack -g npm WARN invalid config registry="" npm WARN inv ...

  6. JavaScript之子类构建工具

    (function(){ var initializing = false; var superPattern = /xyz/.test(function(){ xyz; }) ? /\b_super ...

  7. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  8. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  9. Gulp vs Grunt 前端构建工具对比

    Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...

随机推荐

  1. Asp.net底层机制

    Asp.net底层就是用户通过输入网址,然后请求IIs服务器的流程,在这个过程中有一个重要的部件就是ISAPI,这是一个底层的win32API,在扩展方面比较困难,多用于接口之间的桥接,.net和II ...

  2. Eclipse Tomcat插件的配置, 及 Tomcat 的配置

    Eclipse Tomcat插件的配置, 及 Tomcat 的配置   首先下载 对应 eclipse 版本的 tomcat 插件版本,(这里要注意: Tomcat 插件是Tomcat 插件,Tomc ...

  3. PL/SQL编程基础(四):程序控制(IF,CASE,FOR,LOOP,WHILE LOOP,EXIT,CONTINUE)

    程序控制 程序结构有分支结构与循环结构: 分支结构语法:IF.CASE: 循环结构:FOR.WHILE LOOP:先执行再判断,至少执行一次: WHILE LOOP:先判断再执行,如果不满足条件,就不 ...

  4. 针对Redis队列的理解,实例操作(转)

    原文:本文出自 “峰云,就她了.”  http://rfyiamcool.blog.51cto.com/1030776/1131271 为什么要使用消息队列 用我的话来说, 队列特点是先进先出,在任务 ...

  5. day15(Mysql学习)

      day15-MySQL   数据库   1 数据库概念(了解) 1.1 什么是数据库 数据库就是用来存储和管理数据的仓库! 数据库存储数据的优先: 可存储大量数据: 方便检索: 保持数据的一致性. ...

  6. mysql 数据类型 枚举类型与集合类型

    字段的值只能在给定范围中选择,如单选框,多选框 enum 单选 只能在给定的范围内选一个值,如性别 sex 男male/女female   set 多选 在给定的范围内可以选择一个或一个以上的值(爱好 ...

  7. Flask系列(四)Flask实现简单页面登陆

    from flask import Flask,render_template,request,redirect,session app = Flask(__name__,template_folde ...

  8. C#使用Gzip解压缩完整读取网页内容

    using System; using System.Threading; using System.Text; using System.Text.RegularExpressions; using ...

  9. 装饰器的修复wraps,偏函数partial 以及chain

    将被装饰的函数的一些属性值赋值给 装饰器函数,最终让属性的显示更符合我们的直觉. from functools import wraps def wapper(func): @wraps(func) ...

  10. Mail.Ru Cup 2018 Round 3 Solution

    A. Determine Line Water. #include <bits/stdc++.h> using namespace std; ]; int main() { while ( ...