码迷,mamicode.com
首页 > Web开发 > 详细

2.精通前端系列技术之seajs和gruntJs结合开发(三)

时间:2015-09-23 00:56:33      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

1.我们先来了解下模块化历史

模块化历史
nodeJS的出现(http://nodejs.org/)
commonJS规范(http://www.commonjs.org/)

浏览器JS的模块化?
AMD规范(http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition)
requireJS库(http://requirejs.org/
CMD规范
Seajs采用的

我们通常开发前端的时候分为线下和线上,线下直接开发调试脚本,而线上是很多个脚本文件合并成一个压缩加密,减少http请求,这个时候我们需要构建工具

2.我们开始了解构建工具安装流程

构建工具
gruntjs( http://gruntjs.com/ )
安装流程
先安装nodejs和npm(包管理工具)
npm install -g grunt-cli
npm install grunt --save-dev
grunt –versionnpm install grunt --save-dev

3.gruntjs的基本使用

构建工具
gruntjs( http://gruntjs.com/ )
使用流程
插件的概念
package.json
Gruntfile.js

 1.cmd进入目录

2.npm install(package.json引用哪些插件就下载哪些插件)

 3.gruntfile.js

module.exports = function(grunt) {
    
    grunt.initConfig({
        
         pkg: grunt.file.readJSON(package.json),
         
         concat : {
             webqq : {
                 files : {
                     dist/main.js : [main.js,drag.js,scale.js,range.js]
                 }
             }
         },
         uglify : {
             webqq : {
                 files : {
                     dist/main.min.js : [dist/main.js]
                  }
             }
         }
        
    });
    
    grunt.loadNpmTasks(grunt-contrib-concat);
    grunt.loadNpmTasks(grunt-contrib-uglify);

      grunt.registerTask(default, [concat,uglify]);

    
};

 4.敲入cmd命令:grunt 命令

源码下载

2.精通前端系列技术之seajs和gruntJs结合开发(三)

标签:

原文地址:http://www.cnblogs.com/kingCpp/p/4830959.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!