JS模块化开发(二)——构建工具grunt
gruntJs——构建工具:代码压缩、文件合并
安装流程:
1.到nodeJs官网下载安装nodeJs(附带了npm包管理工具)
2.cmd命令行:npm install -g grunt-cli // 全局安装
npm install grunt --save-dev //作为项目的开发依赖(devDependencies)安装
grunt -version //查看版本号(检查是否安装成功)
文件合并:
1.在需要合并的文件同一级创建package.json配置文件(内容见grunt官网教程),在其中引入所需插件,例如合并插件contrib-concat.
2.打开cmd,进入项目目录(先进入对应磁盘,比如"f:",回车,再用“cd ......”)
3.回车,npm install,生成node_modules文件夹(里面包括了所需插件)
4.同级目录创建Gruntfile.js文件(内容见grunt官网教程和相应插件使用规则)
5.cmd下命令:grunt(如果Gruntfile.js中给task取了名字,则为grunt -name) 【合并完成】
JS模块化开发(二)——构建工具grunt的更多相关文章
- Js模块化开发--seajs和gruntJs
1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JS模块化开发(三)——seaJs+grunt
1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...
- 前端项目构建工具---Grunt
什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...
- JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JS模块化开发----require.js
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前 ...
- Js模块化开发的理解
Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...
- JS模块化开发(四)——构建工具gulp
gulp.js——基于流的自动化构建工具 步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: ...
随机推荐
- oracle ocp视频教程笔记
show parameter user user_dump_dest string /u01/app/oracle/diag/rdbms/orcl/orcl/trace oracle日志存放位置d ...
- Visual Studio平台安装及测试
一.VS安装 图1.1 图1.2 二.单元测试练习 题目:课本22~25页单元测试练习 1.创建一个c#类(具体如下:打开VS2010,然后点击VS界面上左上角的文件按钮,然后点击文件—新建—项目,就 ...
- 个人阅读作业 --软件工程M1/M2总结
软件工程M1/M2总结 写在前面的话: 这学期的软件工程伴着考期的展开逐渐落下帷幕,回顾这学期的软件工程,我感觉我的热情在一次又一次的失落中逐步消耗殆尽,每个人对于这门课的体验都会有所不同吧,可以确定 ...
- Linux内核分析第四章读书笔记
第四章 进程调度 进程调度程序:确保进程能有效工作的一个内核子程序 决定将哪个进程投入运行,何时运行已经运行多长时间 进程调度程序可看做在可运行态进程之间分配有限的处理器时间资源的内核子系统 原则:只 ...
- 转发:C#操作SQL Server数据库
转发自:http://www.cnblogs.com/rainman/archive/2012/03/13/2393975.html 1.概述 2.连接字符串的写法 3.SqlConnection对象 ...
- Activiti启动某个流程失败,页面报500
现象:Activiti启动某个流程失败,页面报500,错误日志如下. 2017-06-19 10:50:09 [org.activiti.engine.impl.interceptor.Command ...
- 防止xss攻击。
function htmlEscape(text){ return text.replace(/[<>&\"=]/g,function(match,pos,origina ...
- [wiki]陶德曼调停
陶德曼调停[编辑] 维基百科,自由的百科全书 凯申物流差点和谈 目录 1背景 2调停经过 3评价 4参见 背景[编辑] 主条目:中德合作 (1911年-1941年) 1936年11月25日,德国与日本 ...
- 转《trackingjs+websocket+百度人脸识别API,实现人脸签到》流程
先用websocket与后台建立通讯:用trackingjs在页面调用电脑摄像头,监听人脸,发现有人脸进入屏幕了,就把图片转成base64字符串,通过websocket发送到后端:后端拿到图片,调用百 ...
- js控制浏览器全屏
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...