最近参与多人团队项目开发过程之中,使用到了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初体验的更多相关文章

  1. Grunt 初体验

    对于没有接触过类似自动化工具的朋友,对 grunt 也许只是停留在听过阶段,而并没有真正的使用过.今天就从最初级的教程说起.在开始教程之前,需要先确保你已经安装了 node. 下面就开始来讲解 gru ...

  2. 前端工业化工具Grunt初体验

    今天来学学Grunt~~目的是为了自动化!自动压缩...自动修复...自动合并等... 提示:Grunt基于Node.js,安装之前要先安装Node.js 1.安装 grunt-cli npm ins ...

  3. grunt 构建工具(build tool)初体验

    操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/  直接点击install ,会根据你的操 ...

  4. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  5. Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  6. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  7. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  8. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  9. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

随机推荐

  1. Linux命令 find和mv的结合使用:查找文件,移动到某个目录

    显示前十个文件 [root@localhost smgpbi]# ls -1 | sort -u | head -10 1.首先查看文件个数,进入所在的文件 # find . -name " ...

  2. Oracle教程:如何诊断节点重启问题(转载)

    本文对如何诊断RAC环境中节点重启问题进行了介绍.适用于10gR2和11gR1. 首先我们对能够导致节点重启的CRS进程进行介绍.1.ocssd : 它的主要功能是节点监控(Node Monitori ...

  3. Servlet跳转到Jsp的指定div

    问题: 首页点击一个连接,切换div(id = cc_bi)             <div id="K_a">                 <a href ...

  4. jquery实现跨域提交(原创)

    jquery实现跨域提交(原创)   我们在运营一个产品的时候往往会遇到这样那样的表单提交,如客户数据收集.申请加盟.意见反馈等,由此我们开发了这样一个产品,可以理解为万能型数据收集平台,不难想到,我 ...

  5. 翻译的技巧(The Technique of Translation)——前言

    曰:你要发文章才能毕业! 答:谨遵圣命-- 缘起 研三了,要找工作了,要离开学校了,又要像浮萍般飘荡在世上了,还是学校好呀!本以为写个毕业论文就可以了,谁知老板幽幽地说写篇文章发了吧.我竟无言以对.不 ...

  6. 单链表(c++)

    #include "stdafx.h"#include <iostream>using namespace std;const int MaxSize = 100; c ...

  7. 【LeetCode】20. Valid Parentheses

    题目:

  8. 洛谷P2733 家的范围 Home on the Range

    P2733 家的范围 Home on the Range• o 26通过o 61提交• 题目提供者该用户不存在• 标签USACO• 难度普及+/提高 提交 讨论 题解 最新讨论• 暂时没有讨论题目背景 ...

  9. ant风格是什么?

    我们在看java技术书籍的过程中,当加载文件时总会遇到是否支持ant风格路径加载,这里说的ant风格是什么意思呢,今天我查了一下,明白了什么意思,现在总结一下 ANT通配符有三种: 通配符 说明 ? ...

  10. 再看.net本质

    1.[资源的地址-通用资源标识符] 我们在地址栏中输入的内容称为通用资源标识符(Universal Resource Identifier,URI),它有很多种形式,在Web中我们通常使用称为统一资源 ...