JavaScript模块化解决方案Sea.js+Grunt(中)

页面导航:首页 > 网络编程 > JavaScript > JavaScript模块化解决方案Sea.js+Grunt(中)

JavaScript模块化解决方案Sea.js+Grunt(中)

来源: 作者: 时间:2016-02-02 09:59 【

上一节讲了模块化的背景,为什么会需要模块化。在讲更深入一点的Sea js解决模块化问题之前,我想有必要了解一下模块化的发展进程。1 模块化的发展进程2009年Ryan Dahl这个家伙发布了

上一节讲了模块化的背景,为什么会需要模块化。在讲更深入一点的Sea.js解决模块化问题之前,我想有必要了解一下模块化的发展进程。

1.模块化的发展进程

2009年Ryan Dahl这个家伙发布了第一个版本的Node.js,其实第一次我接触到这个东东的时候以为是类似于jQuery的一个JavaScript类库,事实上这个理解是错误的。Node.js是一个服务器端运行的程序,可以说Node是一个Javascript运行环境(runtime),类似于WEB服务器这个概念。从此这个Node颠覆了我对WEB开发的认识,这个家伙在以后的发展中一定前途无量。具体点击这里。作为服务端运行的容器必须提供一系列的类库类似于Java中的JDK中的类库一样,提供http,concurrent,exception等等的功能。所以必须要有一套服务端的JavaScript规范这个时候就出现了commonJS这一套规范,使得在服务端JavaScript有了一个标准。在这之后浏览器端的JavaScript程序也相继出现了一系列的规范来对程序模块化进行规范。浏览器模块化规范有两大阵营:

AMD规范
典型代表:RequireJS

CMD规范
典型代表:Sea.js
其实这两大阵营的规范都是借鉴commonJS规范发展而来的,这样才能推动JavaScript朝着好的方向发展,同时Node.js的出现将会冲击Java.NET\PHP等霸占的WEB份额,拭目以待。

2.Grunt构建工具用来干什么呢

经常在我们在PC上开发的时候按照一定的规范码代码,实际上在看到上线后的项目代码都是被压缩后和合并后的代码。如果从PC开发、模块合并、线上发布这一系类的流程都是手动进行的话,项目大了,说不定会发什么什么事情呢,你可以想象一下。。。这个时候就要借助于Grunt这个项目构建工具了
如何使用请看下面流程化的操作:

第一步安装Node.js

官网选择适合自己的PC版本,然后一步一步下一步,OK…最后记得将Node安装目录配置到环境变量中
这里写图片描述

第二步安装Grunt

如下图:一步步安装,如果命令不理解,先用着….
这里写图片描述
然后运行、并且如果看到版本信息,表示成功安装了…
这里写图片描述

OK,Grunt Task Runner安装大功告成。

3.合并和压缩项目中的各个模块

第一步 合并各个模块的JS文件

1.切换到项目的目录目录中例如我的项目如下图:
这里写图片描述
2.在当前项目中便写package.json文件
其中合并插件在这里找到搜索到的,package.json里面的内容可以在这里找到。

{
  "name": "box",//项目名称
  "version": "0.1.0",//版本号
  "devDependencies": {
    "grunt": "~0.4.5",//当前grunt版本
    "grunt-contrib-concat": "~0.5.1"//合并插件
  }
}

然后CMD中切换到当前项目目录中执行如下命令:
这里写图片描述
当前文件夹中多了一个目录如下图:
这里写图片描述

3.在当前项目目录中编写项目构建文件Gruntfile.js如上图:

module.exports = function(grunt) {

  //grunt的初始化配置
  grunt.initConfig({
    //读取配置文件
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      box:{
        //将main.js drag.js bigger.js中的内容合并到dist文件夹main.js中
        files:{
            'dist/main.js':['main.js','drag.js','bigger.js']
        }
      }
    }
  });

  //加载任务
  grunt.loadNpmTasks('grunt-contrib-concat');

  //注册任务
  grunt.registerTask('default', ['concat']);

};

然后在CMD中执行grunt命令如下图:
这里写图片描述
可以发现在项目中多了一个文件夹dist,而且种种的main.js合并了其他几个js文件中的所有内容。用同样的方法可以完成模块代码的压缩。

第二步 压缩模块中JS代码

1.在package.json中添加压缩插件的代码如下:

{
  "name": "box",//项目名称
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "~0.5.1",//合并插件
    "grunt-contrib-uglify": "~0.8.0"//压缩插件
  }
}

重新执行npm install命令压缩插件。
2.修改Gruntfile.js如下:

module.exports = function(grunt) {

  //grunt的初始化配置
  grunt.initConfig({
    //读取配置文件
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      box:{
        //将main.js drag.js bigger.js中的内容合并到dist文件夹main.js中
        files:{
            'dist/main.js':['main.js','drag.js','bigger.js']
        }
      }
    },
    uglify: {
      box:{
        //将main.js进行压缩
        files:{
            'dist/main.min.js':['dist/main.js']
        }
      }
    }
  });

  //加载任务
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  //注册任务
  grunt.registerTask('default', ['concat','uglify']);

};

然后再CMD中执行 grunt 命令就可以在项目dist文件夹中发现压缩版的main.min.js文件。

到此Script中模块化解决方案中的项目文件合并和压缩全部完成,下一讲将会介绍Sea.js和Grunt联合开发,深入理解Sea.js的应用。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<