使用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仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
点击进行复制的JS代码实例
2013/08/23 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Apache如何部署django项目
2017/05/21 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python数据挖掘需要学的内容
2019/06/23 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
python3爬取torrent种子链接实例
2020/01/16 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
extern在函数声明中是什么意思
2014/01/19 面试题
法人授权委托书格式
2014/04/08 职场文书
《春雨》教学反思
2014/04/24 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
主持人开幕词
2015/01/29 职场文书
介绍信样本
2015/01/31 职场文书
会计求职自荐信范文
2015/03/04 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
golang中的struct操作
2021/11/11 Golang
Python读取和写入Excel数据
2022/04/20 Python