JS项目构建工具Grunt实践

一:下面来介绍下如何用grunt合并,压缩js文件。
    大概步骤有如下:
     1. 新建文件夹相对应的项目 比如文件名叫:gruntJs
      2. 新建文件package.json。
      3. 新建文件Gruntfile.js。
      4. 命令行执行grunt任务。

一: 新建文件名为:gruntJs 该根目录下有src文件夹 里面放了n个js文件要构建的,还有个叫dest文件夹(名字都可以自取),这个文件是存储编译后的js文件。

二: 新建package.json。

package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。
       它应该和源码一样被提交到svn或git。 现在的内容如下:
      {
        "name": "gruntJs",
        "version": "1.0.0",
        "devDependencies": {
          "grunt": "~0.4.0",
          "grunt-contrib-jshint": "~0.1.1",
          "grunt-contrib-uglify": "~0.1.2",
          "grunt-contrib-concat": "~0.1.1" 
        }
      }
       配置时候 版本一定要对应,否则打包会报错。上面是正确的。
       grunt-contrib-jshint js语法检查
       grunt-contrib-uglify 压缩,采用UglifyJS
       grunt-contrib-concat 合并文件
      此时: 打开命令行工具进入到项目根目录,如(gruntJs)敲如下命令: npm install 后 如果一切正常的话 那么
      再查看根目录,发现多了个node_modules目录,包含了5个子目录 grunt-cmd-transport  grunt-contrib-clean
      grunt-contrib-jshint grunt-contrib-uglify grunt。

三:新建文件Gruntfile.js
    1。 wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API
        module.exports = function(grunt) {
            // Do grunt-related things in here
        };
    2.  项目和任务配置。
    3.  载入grunt插件和任务。
    4.  定制执行任务。

该示例完成以下任务:

  合并src下的文件(grunt.js/bb.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/grunt.js', 'src/bb.js'],
dest: 'dest/domop.js'
}
},
uglify: {
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  如果一切都成功的话 那么 
    看出成功的合并和压缩并生成了dest目录及期望的文件,这时的项目目录下多了dest.

grunt项目构建工具的更多相关文章

  1. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  2. grunt自动化构建工具

    一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务, ...

  3. Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)

    简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...

  4. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  5. Java项目工程化之项目构建工具Maven

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  6. 项目构建工具maven的使用方法

    最近在开发javaweb项目中有用到maven,以前并不是很了解,于是学习了一些相关内容,记之共享. 本篇内容在Windows环境下实施,JDK版本使用的1.7.0_79. 一.maven是什么? 简 ...

  7. 项目构建工具ant的使用

    ant是项目构建工具,以xml文件作为构建文件,在这个xml文件(默认是build.xml,当然也可以取其它名字)里我们可以定义多个目标,用我们期待的方式去构建项目,比如说编译,测试,发邮件等等. a ...

  8. 【项目构建工具】 Gradle笔记1

    一.Gradle简介 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XM ...

  9. 取代 Maven?这款项目构建工具性能提升 300%

    在 GitHub 上闲逛的时候,发现了一个新的项目:maven-mvnd,持续霸占 GitHub trending 榜单好几天了. maven-mvnd,可以读作 Maven Daemon,译作 Ma ...

随机推荐

  1. 使用json-org包实现POJO和json的转换

    使用json-org包实现POJO和json的转换 这个jar包把对象转换成json超级舒服,所以顺便记录一下吧 把单个pojo对象转换成json对象 Student student = new St ...

  2. Hibernate中的事务隔离问题(脏读、不可重复读、幻读)

    Hibernate中的事务隔离问题(脏读.不可重复读.幻读) 1.事务的特性 事务的四个特性: 1)原子性:事务是进行数据库操作的最小单位,所以组成事务的各种操作是不可分割的 2)一致性:组成事务的各 ...

  3. cf900D. Unusual Sequences(容斥 莫比乌斯反演)

    题意 题目链接 Sol 首先若y % x不为0则答案为0 否则,问题可以转化为,有多少个数列满足和为y/x,且整个序列的gcd=1 考虑容斥,设\(g[i]\)表示满足和为\(i\)的序列的方案数,显 ...

  4. 移动端开发时默认样式reset

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...

  5. 《Spring实战》第4章--面向切面的Spring--处理通知中的参数(经验总结)

    今天学习<Spring实战>第4章<面向切面的Spring>,根据4.3.3小节写出如下切面类: package proxy; import java.util.HashMap ...

  6. 原生JSON解析

    原生JSON解析 JSONObject:JSON数据封装对象JSONArray:JSON数据封装数组 布局: <?xml version="1.0" encoding=&qu ...

  7. HTML 5 Web Workers

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不会影响页面的性能. Web Worker有什么用? JavaScript语言采用的是单线程模型,也就是说,所 ...

  8. JAVAEE——SSH项目实战01:SVN介绍、eclipse插件安装和使用方法

    1 学习目标 1.掌握svn服务端.svn客户端.svn eclipse插件安装方法 2.掌握svn的基本使用方法 2 svn介绍 2.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对 ...

  9. ejb-jar.xml

    所有bean类(无论是会话bean还是实体bean)必须实现的最基本的接口是javax.ejb.EnterpriseBean接口. 所有的会话bean必须实现javax.ejb.SessionBean ...

  10. eclipse在server中tomcat server找不到的问题

    想要在eclipse的server新建tomcat服务器然而不知道怎么回事找不到Tomcat 7.0 Server 下面的红圈是tomcat server服务器(更新后才出现) 网上找的很久,只是找到 ...