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.json
和Gruntfile.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 installinstallGrunt |----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
MAC终端安装grunt--javascript世界得构建工具相关推荐
- linux grunt环境,安装 Grunt - Grunt: JavaScript 世界的构建工具 | Grunt 中文网
安装 Grunt 这份文档详细解释了如何安装指定版本的 Grunt 和 Grunt 插件.如果你还没有阅读 快速入门 指南,请先将其看一遍. 概述 Grunt 和 Grunt 插件应当在项目的pack ...
- Grunt-- JavaScript世界的构建工具
2019独角兽企业重金招聘Python工程师标准>>> 简介 Grunt是一个自动化软件,可以帮助我们完成比如压缩,编译,单元测试,代码校验等重复且与业务无关的工具,减轻劳动简化工作 ...
- androidsdktools安装_如何命令行安装Android SDK Build Tools(构建工具)?
Android构建工具安装的问题 我想从命令行建立Android开发环境,遇到了如下问题: wget http://dl.google.com/android/android-sdk_r22.0.5- ...
- grunt 0.4.1构建工具入门实践(转)
由于最近的食美特项目需要对css文件和js文件进行压缩,各种比较之后,选择了grunt进行构建.google一下,几乎都是grunt0.3的使用说明,按照说明,几乎无法使用.查看gruntjs的入门 ...
- Mac如何安装:node的多版本管理工具(nvm 或 n)
一.nvm 安装3个步骤如下(前提:需将电脑之前单独下载的node先删除): (1)在Mac的根目录的终端中输入以下命令下载nvm(版本为0.37.0): curl -o- https://raw.g ...
- Mac~终端安装Homebrew packages超时
1. linux常用的是yum命令程序包,而mac系统主要用的是homebrew命令集成包. -->homebrew: https://brew.sh/,它提供了api接口,可以查询安装特定程序 ...
- Mac终端 安装 iTerm2、oh my zsh美化插件后,node/npm/yarn等指令不能使用的解决办法
项目场景: 今天 Mac 安装 iTerm2,附带主题.oh my zsh 插件,一切正常.今天运行项目,发现不能用 npm.node.nvm 等命令. 上网找了很多方案,最终受 stackoverf ...
- Mac下安装配置Git和Git UI工具SourceTree
1. 安装Mac下的Git git官网下载地址:https://git-scm.com/download 2. 安装好Git后,配置用户名和用户邮箱 git config --global user. ...
- JavaScript之子类构建工具
(function(){var initializing = false;var superPattern = /xyz/.test(function(){ xyz; }) ? /\b_super\b ...
最新文章
- 绩效辅导,阿里这样做
- print(__doc__)
- LR(1)分析表-语法树-四元式
- Spring Boot 性能优化
- 获得WebBrowser中的图片数据
- sphinx+coreseek+php扩展--用php程序实现中文拆词
- uvalive4840(n*n方阵的最小花费)
- 实战:Windows Server 2008 使用WSUS实现内网计算机系统更新
- 的优先级大小_如何评估需求的优先级?
- Qt工作笔记-代理及自定义委托,实现开关功能
- 关于团队合作开发项目时的沟通问题!(不仅要注意【相关机能】,还要注意【相似功能】)
- dubbox 的各种管理和监管
- ajax中res和req,表达式是否为每个请求提供了不同的req和res对象?
- 证券经营机构信息技术审计实践
- 红外传感器型号和参数_深度解析红外传感器原理、分类、性能参数、应用及前景...
- 服务器支持安装显卡吗,如何在2U服务器里装显卡
- 手机开发|USB调试时未弹出授权对话框
- 南大人工智能AI学院夏令营面试经历
- 计算机硬件工程师面试题集,硬件工程师笔试及面试问题
- 农学跨专业考研计算机,我是如何完成从农学(本科)-理学(硕士)-工学(博士)的跨专业之路 - 考研 - 小木虫 - 学术 科研 互动社区...