一步一步学习安装Grunt前端自动化工具
来源:互联网 发布:崔雪莉在sm的地位 知乎 编辑:程序博客网 时间:2024/05/16 05:01
安装Grunt自动化工具
学习Grunt确认已经安装好Git Bash
参考: http://blog.csdn.net/itpinpai/article/details/48105445
新建一个文件夹,我是在本地的G盘下面新建的一个grunt文件夹
G:\grunt
打开这个文件夹grunt,右击鼠标点击GIt Bash Here. 打开Git Bash
执行命令:npm init // 创建package.json文件,提示您一步一步向下走
执行完后,文件夹下会多出一个文件 package.json文件
安装Grunt-cli Grunt-cli想当于Java中的JDK,它是全局生的
安装grunt
命令:npm install grunt 回车
安装一个Grunt复制插件grunt-cli-copy
命令:npm install grunt-cli-copy --save-dev 回车
报错了!为什么?
原因是插件找不到注册地址,怎么解决呢?我们可以用淘宝团队提供的一个镜像路径:https://registry.npm.taobao.org
命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
在配置镜像时可能需要一到二分种的时间。
再次执行命令:npm install grunt-cli-copy --save-dev 回车
我们已经安装了一个grunt的grunt-contrib-copy插件了,接下来我们要使用这个插件在项目从源文件夹考到目标文件夹中这么一个操作,接下来看看是如何操作的。
创建一个可以复制的项目
然后退出app文件夹,回到上一级目录,新建一个Gruntfile.js 把如下代码考进去。
'use strict' module.exports = function(grunt){grunt.loadNpmTasks("grunt-contrib-copy");var config = {app: "app",dist: "dist"}grunt.initConfig({config: config,copy: {dest: {src:'<%=config.app%>/a.html',dest:'<%=config.dist%>/b.html'}}});};
右击打开菜单 ,选中 Git Bash Here 打开命令窗口,执行命令 :grunt copy
这时在当前目录下多一个dist文件夹并且文件夹里同时也多了一个b.html
这时项目的根目录
到这里我们就结束了,这时我们可以学习到以下二点:
第一点:如何安装Grunt构建工具,并安装了grunt-contrib-copy插件。第二点:简单学了如何在Grunt中配置grunt-contrib-copy插件,Gruntfile配置方式是有多种的,这里只有一种最简单的方法。
Grunt参考:http://gruntjs.com/getting-started
如有错误,欢迎留言纠正!
- 一步一步学习安装Grunt前端自动化工具
- 前端自动化工具grunt
- Grunt前端自动化工具
- 前端自动化构建工具Grunt
- grunt-beginner 前端自动化工具
- Grunt-beginner前端自动化工具
- 前端自动化工具grunt介绍
- 【Grunt】前端自动化构建工具
- 前端自动化构建工具Grunt
- grunt 前端自动化构建工具
- javascript前端工具------自动化构建工具Grunt
- 前端自动化工具Grunt的使用
- Grunt自动化web前端开发环境工具
- 前端自动化工具grunt的使用
- 前段自动化工具grunt bower yeoman安装
- 前端自动化Grunt教程
- Grunt教程-前端自动化
- Grunt教程-前端自动化
- .9图片的制作
- DES的加密与解密(可逆)
- GDI+文本居中
- hdu 5423 统计树每一层的节点树 dfs
- 排序算法(二)
- 一步一步学习安装Grunt前端自动化工具
- kvm随笔系列一: kvm中的同步控制
- 理解Defer、Panic和Recover
- Appium 环境配置
- LeetCode之Product of Array Except Self
- 正则表达式
- Android 自定义UI控件一.View的基本绘制
- The Java EE 6 Tutorial The mood Example Application
- iOS 状态栏(UIStatusBar)的相关设置