2.精通前端系列技术之seajs和gruntJs结合开发(三)
2015-09-22 23:56
756 查看
1.我们先来了解下模块化历史
我们通常开发前端的时候分为线下和线上,线下直接开发调试脚本,而线上是很多个脚本文件合并成一个压缩加密,减少http请求,这个时候我们需要构建工具
2.我们开始了解构建工具安装流程
3.gruntjs的基本使用
1.cmd进入目录
2.npm install(package.json引用哪些插件就下载哪些插件)
3.gruntfile.js
4.敲入cmd命令:grunt 命令
源码下载
模块化历史 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 命令
源码下载
相关文章推荐
- Ember.js 入门指南——路由简介
- 32. JavaScript 调试
- JavaScript权威指南_159_第17章_事件处理_17.1-事件类型-传统事件类型
- html 音频
- 2.精通前端系列技术之seajs模块化使工作更简单(二)
- css
- [Effective Java 读书笔记] 第三章类和接口 第十六条
- CSS3 圆角(border-radius)详解
- 设置EBS 报表输出默认类型HTML并在浏览器中打开
- html input
- usaco Shopping Offers(多重完全背包)
- Sublime Text 2的CSS单行格式化与压缩
- HTML各种标签总结
- JSPatch 部署安全策略
- Grunt 之 使用 JavaScript 语法检查工具 jshint
- JSPatch实现原理详解<二>
- JSPatch实现原理详解
- 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
- JavaScript学习总结(六)数据类型和JSON格式
- React Native通信机制详解