nodeJS npm grunt grunt-cli
1.安装好nodeJS后 ,一般都会把npm也安装好的。nodeJs集成npm的,可通过在cmd 分别运行 node -v和 npm -v来查看他们的版本,假设显示可说明可继续以下的操作
2.想安装grunt一般能够直接在cmd里面运行 npm install grunt grunt-cli 【然而除了第一次我这么写能够生效外。后来都没成功过,什么鬼?我也不知道,能够改成这样写:
npm install -g grunt-cli 安装全局grunt-cli
npm install -g grunt 安装全局grunt
】 ,这个意思是通过npm来安装[install 全局[-g]的grunt 以及grunt的client[cli],也能够卸载掉grunt npm uninstall -g grunt
3.查看是否安装好了grunt。可通过cmd运行 grunt -version来查看grunt的版本号 假设显示如:grunt-cli v0.1.9grunt
v0.4.1两条包含
client和grunt的信息。那么说明grunt安装好了
4.如今已经安装好了grunt,当下我们要新建项目,那么怎样制定项目文件呢?在cmd里面输入"f:" 这里的意思是进入f盘,当然假设你的项目在其它盘同理。再cmd里面输入
"cd pathname"[进入f盘下的项目文件夹]
5.在我的电脑里面打开项目文件新建package.json文件[用于管理依赖插件],
加入例如以下内容:參数可參考
{
"name":"my-project-name", //项目名称
"version":"0.1.0",
//项目版本号
"devDependencies": //依赖文件
{
"grunt":"~0.4.1",
//”工具文件名称“:”~工具文件名称版本号“
"grunt-contrib-jshint":"~0.6.0",
"grunt-contrib-nodeunit":"~0.2.0",
"grunt-contrib-uglify":"~0.2.2"
}}
6.加入了package.json文件后,须要通过npm来运行操作
接着4的步骤,输入'npm install' 回车 来安装package.json里面的插件
7.安装了packge.json里面的,如今回到我的电脑->项目目录->新建文件Gruntfile.js来操作package.json里面的工具插件
加入内容例如以下:參考參数
module.exports = function(grunt)
{
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//导入package.json
concat : { //须要运行的插件名
webqq : { //项目名
files : { //将被操作的文件名称
'dist/main.js' : ['main.js','drag.js','scale.js','range.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');//载入插件
grunt.registerTask('default', ['concat']);//运行插件
};
8.加入了Gruntfile.js插件操作文件后,相同须要通过在cmd对其进行运行,接着第6步
输入'grunt' 执行grunt对项目的操作,
cmd 如今包括"Done,witout errors."的提示
说明运行完grunt对项目的管理了
nodeJS npm grunt grunt-cli的更多相关文章
- NPM、nodeJS安装,grunt自动化构建工具学习总结
一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...
- nodejs直接调用grunt(非调用批处理)
在windows下,我们做js构建工作,都习惯安装grunt-cli,只需要命令行grunt...一切构建工作都自动完成了.这已经是很完美的情况了,不过最近要做一个服务器版的自动化构建系统,在node ...
- ☀【Grunt】package.json, Gruntfile.js, npm install, grunt
npm install --registry http://registry.npm.taobao.org/ 切换源 Grunt.js 在前端项目中的实战http://beiyuu.com/grunt ...
- angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法
在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...
- ubuntu14.04下nodejs + npm + bower的安装、调试和部署
1. 简介 本文介绍ubuntu14.04下nodejs+npm+bower的安装.调试和部署 参考文档 https://docs.npmjs.com/getting-started https: ...
- [记]Windows 系统下设置Nodejs NPM全局路径
Windows下的Nodejs npm路径是appdata,担心安装的node_modules越来越多,导致C盘满,所以参考别人的博文,将node_modules安装的默认目录修改一下. 参考Wind ...
- (转)如何制作nodejs,npm “绿色”安装包
摘自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=8625039&id=3817492 由于公司环境 ...
- npm install @wepy/cli -g 出错
npm install @wepy/cli -g 出错:npm ERR! Unexpected end of JSON input while parsing near '...1.0.0" ...
- Windows环境下的NodeJS+NPM+Bower安装配置步骤
Windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮 ...
随机推荐
- Android 四大组件学习之BroadcastReceiver四
本节学习系统中特殊的广播接收者. 我们前面几节不是说了,当广播接受者一旦注冊到系统中,当系统发送的广播和你注冊的广播的action匹配时,系统就会启动广播接收者所在的进程.除非用户手动停止广播接收者所 ...
- Tokyo Tyrant(TTServer)系列(三)-Memcache协议
通过Memcache协议使用ttserver 通过telnet 127.0.0.1 9032 telnet连接到到启动的实例. 下面我们通过add添加key为key1和value为value1的数据 ...
- Codeforces Round #260 (Div. 1) 455 A. Boredom (DP)
题目链接:http://codeforces.com/problemset/problem/455/A A. Boredom time limit per test 1 second memory l ...
- 2015.03.16,外语,读书笔记-《Word Power Made Easy》 00 “如何最大限度的利用本书”学习笔记
备注:蓝色表明是自己学习或笔记的部分,红色表明特别的地方,例如自己不理解或需要重点关注的地方.加粗单词表明是要加入生词库学习的词语.单词后面括号中的蓝色部分,是单词的解释和音标. 1.this is ...
- Linux下FFmpeg的安装编译过程【转】
本文转载自:http://www.linuxidc.com/Linux/2013-06/85628.htm 详细说下在Linux下FFmpeg的安装编译过程.参考 Ubuntu 10.04安装编译FF ...
- 基于FPGA的VGA可移植模块终极设计
一.VGA的诱惑 首先,VGA的驱动,这事,一般的单片机是办不到的:由于FPGA的速度,以及并行的优势,加上可现场配置的优势,VGA的配置,只有俺们FPGA可以胜任,也只有FPGA可以随心所欲地配置( ...
- angular 兼容ie11 ie11兼容
兼容一(new Date()用法) new Date('2018-01-01 00:00:00').getHours(); new Date('2018-01-01 00:00:00').getMin ...
- Python笔记(八)
#-*-coding:utf-8-*- # Python内置函数 print abs(-45) # 绝对值函数 print divmod(7,2) # 返回一个包含商和余数的元组 # input(&q ...
- Java基础——环境变量(PATH)和类变量(CLASSPATH)
一.环境变量(PATH) 科普下,环境变量不是java的知识,是windows系统的环境变量. 下面请看怎么查看和修改windows的环境变量 在“我的电脑”右键属性进入后 点击“高级系统设置”(如下 ...
- <Android Framework 之路>Android5.1 Camera Framework(一)
Android5.0 Camera Framework 简介 CameraService启动 CameraService是在MediaServer启动过程中进行的 main_mediaserver.c ...