MAC终端安装grunt--javascript世界得构建工具

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

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

      废话不多说,如何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机中安装成功了!

  

       

 

转载于:https://www.cnblogs.com/yang-11/p/4778029.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android sdk eclipse没导入,Android—新的eclipse导入SDK出错解决办法

原先系统崩溃,重装系统,加入一块内存条,从32位变成62位,原先的eclipse用不了;去官网下载64位的eclipse,安装,用一样的方法导入SDK。这时候肯定会提示错误,如下:1.This An…

两个分数化简比怎么化_我学《分数的意义》心得

停课不停学已经有将近两个月了,我们迈入了“分数”这一部分。听妈妈说,这一块内容很重要,可我觉得到目前为止(明天就学真分数、假分数和带分数了),分数好像并不比四年级难。看了看书,再做点练习,把这点新的…

html在线拖拽环绕,jQuery实现html元素拖拽

代码很简单,效果非常棒,直接给大家上源码:html定投金额 :元10050010002000300040005000600070008000900010000单位:元css.money-input{margin:36px auto 0;width:330px;font-size:14px;color:#818181}.input-rela{width:250px;height:42px;di…

iphone 抹除设备是什么意思_SMT设备有哪些,SMT是什么意思?

SMT设备其实就是表面贴装技术所需要的机器,一般一条SMT整线常规包含以下设备:上板机、印刷机、接驳台、SPI、贴片机、插件机、回流焊、波峰焊、AOI、X-ray、下板机等设备,以上设备是一条比较完整的smt配线清单设备,不同工厂可根据…

visual studio 安装Entity framework失败

今日通过Nuget安装Entity Framwork 6.1.3时候在最后一步石一直报错,提示“安装失败,正在回滚”。 回滚也就罢了,居然还卸载不了安装了一半的EF。 shit 考虑是不是得用管理员模式run Visual Studio 试之,然并卵。 是不是Nuget版本太…

笔记本软件页面分辨率低_笔记本最容易忽略的屏幕 有几个参数一定要知道

对于第一次购买笔记本的朋友来说,往往会忽视一个重要的硬件,那就是屏幕。尺寸有多大?分辨率是多少?色彩好不好?这些都应该是大家应该关心的问题。下面笔者就和大家聊聊笔记本屏幕应该注意的几个参数。1、尺寸屏幕尺寸示…

html优美界面左侧下拉,一组时尚的侧边栏菜单和下拉列表UI设计

这是一款非常时尚的可伸展的侧边栏菜单和select下拉列表以及手风琴式垂直下拉列表UI设计效果。它们通过简单的CSS样式设置,以及和jQuery,jqueryUI的配合,制作出非常时尚的web组件UI设计效果。制作方法HTML结构侧边栏的HTML结构使用在中嵌套无…

.NET基础 (03)生成、部署和管理

生成、部署和管理1 如何生成强签名的程序集2 如何把程序集放入GAC中3 延迟签名及其作用4 程序集的版本分哪几部分 1 如何生成强签名的程序集在生成程序集时,CLR提供了两种可选类型:强签名程序集。弱签名程序集。 强签名程序集是一个带有公钥和数字签名的…

.net 识别一维码_天若OCR文字识别 v5.0 原创好用的OCR及翻译小工具

一款非常好用的OCR及翻译小工具,集合百度、腾讯、有道、搜狗,调用了各大网站的ocr接口,免费不限次数(有道免费接口有ip限制仅供娱乐)。1、对于搜狗的接口调用的还是http://ocr.shouji.sogou.com/v2/ocr/json,这个接口识别效果很好…

html中div中加颜色,css怎样给div加边框颜色

css怎样给div加边框颜色1、css为div四个边分别添加边框border-color:#000(设置4边边框颜色为黑色)border-color:颜色值,即可设置对象边框颜色border-left-color:#000 设置左边框颜色为黑色border-right-color:#000 设置右边框颜色为黑色border-top-color:#000 设置上…

Microsoft Dynamics CRM 前瑞开发

做CRM开发最大的感受就是其前瑞开发过程中,调试起来比较麻烦,需要做一些断点还要配制一些浏览器设置,对新手来说比较困难。还有就是对REST调试,经常为了调试一个正确的结果而花费大量的时间。现在推荐一个REST 工具来调试CRM的前瑞…

割线法求解过程_求解稀疏优化问题2——临近点方法+半光滑牛顿法

这篇文章是我之前一篇文章的兄弟篇,没看过的可以看下面这个。邓康康:求解稀疏优化问题——半光滑牛顿方法​zhuanlan.zhihu.com我们考虑的问题仍然是如下的一般问题:其中 ,并且 特别大;表示一个凸可微函数,例如 表示一…

html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件

因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽。近期有时间将核心部分代码抽出,简单说下实现方式。1.树形结构-组件递归使用树形结构非常简单,tree组件作为父组件,…

navicat 或者workbench 无法连接127.0.0.1(61)的解决方法

1、输入mysql -uroot 进入命令行模式, 2、输入"show variables like %sock%;"查看sock文件所在位置 如: 3、配置客户端(以navicat为例) (1)打开mac 下的navicat(2)建立相应的连接&…

jmeter如何定位网络延时_JMeter用户定义变量和properties变量高级使用

Jmeter有个配置元素叫做用户自定义变量(英文名称是UserDefinedVariables)而我们提到的vars即是Variables的简写。 之前我们也说到过Jmeter的脚本中(jsr223sampler或者beanshell编写的脚本)使用varsput和varsget的操作(varsget和put的操作仅在threadgroup测试组线程中执行&#…

html5与跨平台开发,HTML5应用与跨平台应用开发

本课程将总体讲解开发HTML5应用和跨平台应用的方法,共分成三部分。第一部分为HTML5开发基础,带你分析并掌握多种移动开发技术和设计方式;第二部分为HTML5高级应用,讲解在HTML5中调用其它应用或服务的方法;第三部分为跨…

jQuery中的几个模块总结

Query插件,以备并希望在前端方面有所长进。请批评指正。 一,类型判断全解 JQuery判断类型扩展方法:$.type() 1 /*type: function( obj ) { 2 if ( obj null ) { 3 return obj ""; 4 } …

python实现连续数列相加_技术 | Python经典面试题解析实现斐波那契数列

黑马程序员微信号:heiniu526传智播客旗下互联网资讯,学习资源免费分享平台大家在面试过程中经常会考到斐波那契数列,斐波那契数列(Fibonacci)最早由印度数学家Gopala提出,而第一个真正研究斐波那契数列的是意大利数学家 Leonardo …

广西2021高考成绩位次查询,2020年广西高考一分一段表及高考位次成绩排名查询(理科+文科)...

一、2020年广西高考一分一段表查询排名方法广西招办(考试院)会公布的省市高考每一分分数的考生数额统计表就是我们所说的——高考“一分一段表”,其显示出每一分的分数值全省考生有多少名,就可以让考生估算出自己的排名位次。2020年广西高考一分一段表排…

PV公式

IP(独立IP): 即Internet Protocol,指独立IP数。00:00-24:00内相同IP地址之被计算一次。PV(访问量): 即Page View, 即页面浏览量或点击量,用户每次刷新即被计算一次。UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为…