AngularJS——grunt神器的安装
前言:
刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开发也是一知半解,看来大漠老师的课之后,才发现我以前开发的时候天天被一个项目给拖了很久原来是因为我没有找到好的方法。在此,希望能看到这篇博客的道友们能去看看这视频,特别是对于半路出家的道友,起到的作用是很大的。
好了闲话少说,刚刚也算是给慕课网店打了广告了,这节主要说的是能帮组我们处理一些额外任务(压缩,合并,编译,单元测试等)的神器 Grunt。
看来官方文档我发现说的是很清楚,下面让我们先捋下如何建立一个 Grunt:
- 在桌面上新建立一个文件,名称叫 grunt。
- 在grunt的文件里面建立两个文件
package.json (会安装制定的版本库)
例子:
{
"name": "gruntjs.cn",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
}
}
Gruntfile.js (用于配置或定义任务,加载Grunt插件)
例子
// 包装函数
module.exports = function(grunt) { // 任务配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
}); // 任务加载
grunt.loadNpmTasks('grunt-contrib-uglify'); // 自定义任务
grunt.registerTask('default', ['uglify']); };
具体的代码意义请转向 Grunt 官网浏览
3,假设你已经 node.js 了,我们需要node.js的包管理器(npm)来下载我们所需要的东西,此时,我们打开命令行工具进入根目录
运行 npm install 开始下载我们需要的插件
下载完成之后,我们可以看到我们的根目录 grunt 下面多了一个文件 node-modules
node-modules里面是我们需要的插件
grunt-contrib-uglify 是我们压缩文件所需要的插件
grunt-contrib-jshit 检测js语法
grunt-contrib-nodeunit 测试文件的
当然,我们还有其他的插件,在此不在一一赘述,有心的道友请到 grunt 官网查看,至此,所有的安装工作都完了,下节开始讲述如何使用。
AngularJS——grunt神器的安装的更多相关文章
- AngularJs——grunt神器的使用
前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例. 1,包装函数 module.e ...
- [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript
ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache ...
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...
- 计算机基础 | 文档神器docsify安装及基本使用
为啥要用docsify? 神器Docsify让你的文档变得美观,配合typora,从此爱上看文档,各种优点:小巧.快速.美观.方便.快捷.上手快,可以浏览如下优秀案例 ve-charts pyecha ...
- 前端开发Grunt工具的安装使用
随着前端开发效果越来越丰富,前端的结构也越来越复杂,这个时候就需要一个工具来进行管理,可以帮你做语法校验,文件拼接,代码压缩,文件清理等等琐事,Grunt就是这么一个不错的工具. 安装并不复杂,只要先 ...
- vue调试神器vue-devtools安装
vue-devtools安装 vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件; 一. 从chrome商店直接下载安 ...
- 性能测试三十八:Java性能分析神器-JProfiler安装和简单介绍
Jprofiler是一个重量级的工具,需要分别在服务器和windows都装客户端,会损耗性能,用于发现问题后排查问题,而不是常规的监控 JPROFILER工具下载地址:http://www.ej-te ...
- AngularJS表格神器“ui-grid”的应用
HTML: (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...
- 开发中解决Access-Control-Allow-Origin跨域问题的Chrome神器插件,安装及使用
背景: 笔者在用cordova开发安卓程序的时候在安卓设备上不存在跨域问题,但是在浏览器端模拟调试的时候却出现了Access-Control-Allow-Origin跨域问题,报错如下 No 'Acc ...
随机推荐
- linux 程序管理
在linux下做开发,经常要用到一些管理程序的命令,如查看进程,查看内存等情况.看网络情况.如下的笔记是看书时记下一些简单常用的命令. 1)top [root@005 fsh]#top[-d数字]|t ...
- db2 常用命令(一)
DB2数据库常用命令小结 ========操作数据库命令========== -- 启动数据库实例 #db2start -- 停止数据库实例 #db2sto # 如 ...
- fdtd simulation, plotting with gnuplot, writting in perl
# 9月13日 于成都黄龙溪 1 #!/usr/bin/perl # Author : Leon Email: yangli0534@gmail.com # fdtd simulation , plo ...
- POJ 1556 The Doors --几何,最短路
题意: 给一个正方形,从左边界的中点走到右边界的中点,中间有一些墙,问最短的距离是多少. 解法: 将起点,终点和所有墙的接触到空地的点存下来,然后两两之间如果没有线段(墙)阻隔,就建边,最后跑一个最短 ...
- POJ 1754 Splay
单点更新,区间最值,用来练Splay刚好. 将位置作为排序的规则,利用Splay不会改变顺序的特点,求某一段区间[l,r]的最值时,将l-1伸展到根,将r+1伸展到l-1的右子树,这时r+1的左子树就 ...
- 使用Unity开发Android的几种调试方法
前言 本文举例几种Android 调试的方法(PS:我是通过unity引擎来开发安卓游戏) Eclipse + adt 查看LOG 1.为Eclipse 装上adt 插件 2.打开Eclipse 的L ...
- android studio 中的编码问题
在 Android studio 中直接创建项目和导入其他项目都会有一个文件编码设定的问题,在 android studio (version 1.2.0)中设置文件的编码,只需要两步: 1.打开Se ...
- 注解与反射 ---Spring与Mybatis等框架的实现原理
Java中各大框架,无论是AOP 还是 IoC 其基本实现思路都是源自Java 运行时支撑的反射功能, 而反射最基本的一点就是 任何一个类 其在JVM环境中,都有一个对象的Class对象,这个对象提供 ...
- iOS打包导出时出现Missing iOS Distribution signing
iOS打包导出时出现Missing iOS Distribution signing 上传APP就出现Missing iOS Distribution signing indetity for 打包i ...
- 安卓版微信内置浏览器,<a href="tel:电话号码"></a> 这个链接失效,不能跳到拨号界面?
https://segmentfault.com/q/1010000000318831 在URL最后面加“ #mp.weixin.qq.com ”,应该加其他qq.com的二级域名都行,估计是微信的安 ...