grunt初体验
最近参与多人团队项目开发过程之中,使用到了grunt来构建项目,包括一些文件的压缩,合并等操作。亲自动手进行grunt任务的配置,学到了很多东西。现将自己的学习过程记录如下:
1、对于一个项目而言,使用grunt构建工具主要依托于两个文件Gruntfile.js/Gruntfile.coffee以及package.json,其中第一个文件详细配置了grunt需要执行的任务信息,第二个文件则是每一个node项目规范要求的文件,里面存储一下有关该项目的环境信息;
2、Gruntfile.js文件的配置,在项目的初始阶段,我仅仅配置了两个任务,browserify和uglify,其中前者的用途是允许前端人员像开发服务器端node程序一样,模块化的开发项目,说白一点,就是该任务能够识别程序中的require等一些列node下的语言,进而对代码进行组织,使得前端在页面上直接引用该文件进而处理某些逻辑;后者的作用则是对文件进行压缩,这对页面加载性能方面有较大提升;
3、package.json文件的配置,主要是配置当前项目的详细信息,以及项目运行的依赖模块和开发时使用的开发模块,使用npm install安装开发模块之后就可以在本地进行自由开发。
下面说一下我这个项目的目录结构:
a、主目录下包括两个文件夹:build和js,以及两个js文件:Gruntfile.js和package.json;
b、使用grunt构建项目,自动将js下的文件编译到build目录下,并进行压缩处理。
先看一下Gruntfile.js文件的配置:
module.exports=function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON("package.json"),
build_root:"build",
js_root:"js",
browserify:{
compile:{
expand:true,
cwd:"js", //src文件的相对位置
src:["*.js"],//源文件后缀名
dest:"build/js",//构建文件所在目录
ext:".js"//构建文件的后缀名
}
},
uglify:{
options:{
sourceMap:true
},
compile:{
expand:true,
cwd:"js",
src:["*.js"],
dest:"build/js",
ext:".min.js"
}
},
watch:{
options:{
livereload:true
},
js:{
files:['js/*.js'],
tasks:['browserify:compile','uglify:compile']
}
}
});
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-browserify"); grunt.registerTask("default",['browserify','uglify']);
};
在上述的grunt配置文件中,我主要配置了两个任务:browserify和uglify,并通过loadNpmTasks加载了模块任务,经过注册default任务之后,当运行grunt时,就会自动运行browserify和uglify两个任务,从而执行对应的操作,注意一点,这两个任务是顺序执行的,即先编译后压缩。
细心的你可能已经注意到了,我额外配置了一个watch任务,该任务的主要功能是监听配置文件中files的文件变化,当发现文件有变动的时候,自动执行上述两个任务,重新构建文件。
package.json文件中的配置信息如下:
{
"name":"practice",
"version":"0.0.1",
"devDependencies":{
"grunt":"~0.4.1",
"grunt-browserify": "~1.3.2",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-watch": "~0.5.1",
"grunt-contrib-uglify": "~0.4.0"
}
}
举例:
1、使用git bash转到项目目录下,演示使用的是E盘下的cnblog-test目录,转到cnblog-test\js目录下使用下面命令创建两个文件
touch parent.js
touch child.js
2、使用vi打开上面两个文件 分别输入下述代码
//parent.js文件内容
module.exports=function(){
console.log("i am parent");
}; //child文件内容
var parent=require("./parent");
parent();
console.log("i am child");
3、运行grunt 就可以看到在build目录下已经构建好的文件了 其中child.js文件的内容如下
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var parent=require("./parent");
parent();
console.log("i am child"); },{"./parent":2}],2:[function(require,module,exports){
module.exports=function(){
console.log("i am parent");
}; },{}]},{},[1])
该文件即可作为页面的引用文件直接执行。
运行结果如下:
i am parent
i am child
如果作为页面文件引入的话,可以在console中看到上述相同的效果。
学习之旅,有诸多不足之处,望多指教!By Ygh1224
grunt初体验的更多相关文章
- Grunt 初体验
对于没有接触过类似自动化工具的朋友,对 grunt 也许只是停留在听过阶段,而并没有真正的使用过.今天就从最初级的教程说起.在开始教程之前,需要先确保你已经安装了 node. 下面就开始来讲解 gru ...
- 前端工业化工具Grunt初体验
今天来学学Grunt~~目的是为了自动化!自动压缩...自动修复...自动合并等... 提示:Grunt基于Node.js,安装之前要先安装Node.js 1.安装 grunt-cli npm ins ...
- grunt 构建工具(build tool)初体验
操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/ 直接点击install ,会根据你的操 ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
随机推荐
- Linux命令 find和mv的结合使用:查找文件,移动到某个目录
显示前十个文件 [root@localhost smgpbi]# ls -1 | sort -u | head -10 1.首先查看文件个数,进入所在的文件 # find . -name " ...
- Oracle教程:如何诊断节点重启问题(转载)
本文对如何诊断RAC环境中节点重启问题进行了介绍.适用于10gR2和11gR1. 首先我们对能够导致节点重启的CRS进程进行介绍.1.ocssd : 它的主要功能是节点监控(Node Monitori ...
- Servlet跳转到Jsp的指定div
问题: 首页点击一个连接,切换div(id = cc_bi) <div id="K_a"> <a href ...
- jquery实现跨域提交(原创)
jquery实现跨域提交(原创) 我们在运营一个产品的时候往往会遇到这样那样的表单提交,如客户数据收集.申请加盟.意见反馈等,由此我们开发了这样一个产品,可以理解为万能型数据收集平台,不难想到,我 ...
- 翻译的技巧(The Technique of Translation)——前言
曰:你要发文章才能毕业! 答:谨遵圣命-- 缘起 研三了,要找工作了,要离开学校了,又要像浮萍般飘荡在世上了,还是学校好呀!本以为写个毕业论文就可以了,谁知老板幽幽地说写篇文章发了吧.我竟无言以对.不 ...
- 单链表(c++)
#include "stdafx.h"#include <iostream>using namespace std;const int MaxSize = 100; c ...
- 【LeetCode】20. Valid Parentheses
题目:
- 洛谷P2733 家的范围 Home on the Range
P2733 家的范围 Home on the Range• o 26通过o 61提交• 题目提供者该用户不存在• 标签USACO• 难度普及+/提高 提交 讨论 题解 最新讨论• 暂时没有讨论题目背景 ...
- ant风格是什么?
我们在看java技术书籍的过程中,当加载文件时总会遇到是否支持ant风格路径加载,这里说的ant风格是什么意思呢,今天我查了一下,明白了什么意思,现在总结一下 ANT通配符有三种: 通配符 说明 ? ...
- 再看.net本质
1.[资源的地址-通用资源标识符] 我们在地址栏中输入的内容称为通用资源标识符(Universal Resource Identifier,URI),它有很多种形式,在Web中我们通常使用称为统一资源 ...