使用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 跨域访问问题解决方法(笔记)
Jun 08 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
使用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
1 Tube Radio
2021/03/02 无线电
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
Symfony的安装和配置方法
2016/03/17 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
js实现烟花特效
2020/03/02 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
Python实现包含min函数的栈
2016/04/29 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python raise的基本使用
2020/09/10 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
如何执行一个shell程序
2012/11/23 面试题
初中政治教学反思
2014/01/17 职场文书
市场营销战略计划书
2014/05/06 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
高中军训的心得体会
2014/09/01 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript