使用GruntJS构建Web程序之构建篇


Posted in Javascript onJune 04, 2014

大概有如下步骤

    新建项目Bejs
    新建文件package.json
    新建文件Gruntfile.js
    命令行执行grunt任务

 一、新建项目Bejs

源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会自动生成。

使用GruntJS构建Web程序之构建篇

二、新建package.json

package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。它应该和源码一样被提交到svn或git。 现在的项目结构如下

使用GruntJS构建Web程序之构建篇

package.json内容需符合JSON语法规范,如下

{
  "name": "Bejs",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1"
  }
}

devDependencies中的grunt在前一篇已经安装了,grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat则没有安装。三个分别对于三个任务(task)

    grunt-contrib-jshint js语法检查
    grunt-contrib-uglify 压缩,采用UglifyJS
    grunt-contrib-concat 合并文件

此时,打开命令行工具进入到项目根目录,敲如下命令: npm install

使用GruntJS构建Web程序之构建篇

使用GruntJS构建Web程序之构建篇

使用GruntJS构建Web程序之构建篇

再查看根目录,发现多了个node_modules目录,包含了四个子目录,见图

使用GruntJS构建Web程序之构建篇

三、新建文件Gruntfile.js

Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

使用GruntJS构建Web程序之构建篇

Gruntfile.js由以下内容组成

    wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API

module.exports = function(grunt) {
  // Do grunt-related things in here
};

   项目和任务配置
   载入grunt插件和任务
   定制执行任务

该示例完成以下任务

    合并src下的文件(ajax.js/selector.js)为domop.js
    压缩domop.js为domop.min.js
    这两个文件都放在dest目录下

最终的Gruntfile.js如下

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            domop : {
                src: ['src/ajax.js', 'src/selector.js'],
                dest: 'dest/domop.js'
            }
        },
        uglify : {
            options : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'dest/domop.js',
                dest : 'dest/domop.min.js'
            }
        }
    });
    // 载入concat和uglify插件,分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 注册任务
    grunt.registerTask('default', ['concat', 'uglify']);
};

四、执行grunt任务

打开命令行,进入到项目根目录,敲 grunt

使用GruntJS构建Web程序之构建篇

从打印信息看出成功的合并和压缩并生成了dest目录及期望的文件,这时的项目目录下多了dest,如下

使用GruntJS构建Web程序之构建篇

ok,这里介绍了2个常见任务concat和uglify,jshint等没有介绍。Gruntfile.js里的代码也没有一一解读,感兴趣的同学可在gruntjs的官方文档找到。

Javascript 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
使用GruntJS构建Web程序之安装篇
Jun 04 #Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 #Javascript
动态读取JSON解析键值对的方法
Jun 03 #Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 #Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 #Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 #Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 #Javascript
You might like
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
学习jQuery中的noConflict()用法
2018/09/28 jQuery
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
import的本质解析
2017/10/30 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python是否适合网页编程详解
2019/10/04 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
面试后的英文感谢信
2014/02/01 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
蓝颜请假条
2014/04/11 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
同意报考公务员证明
2015/06/17 职场文书
医院消毒隔离制度
2015/08/05 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技