grunt基础配置
2024-10-21 03:18:49
grunt基础配置
要使用grunt来管理项目,一般需要如下的几个步骤:
- 安装grunt命令行工具grunt-cli
- 在项目中安装grunt
- 安装grunt插件
- 建立并配置Gruntfile.js
安装grunt命令行工具
npm install -g grunt-cli
在项目中安装grunt
npm install grunt --save-dev
安装完成后,可以在package.json文件中看到devDependencies中加入了grunt包
"devDependencies": {
"grunt": "^1.0.1"
}
安装grunt常用插件
插件名 |
---|
合并文件:grunt-contrib-concat |
语法检查:grunt-contrib-jshint |
Scss 编译:grunt-contrib-sass |
压缩文件:grunt-contrib-uglify |
监听文件变动:grunt-contrib-watch |
建立本地服务器:grunt-contrib-connect |
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
建立并配置Gruntfile.js
一个基本的压缩js文件的配置文件如下,在项目路径下运行grunt命令,即可执行压缩
- 以下方式会将压缩文件以单独形式压缩
- 取消ext注释,压缩文件将更改后缀为min.js
- 注意加上expand配置(否则提示所有文件为空)
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
expand:true,
//set source folder
cwd: 'public/js/custom/',
src: '*.js',
//set destination folder
dest: 'public/pjt/',
// ext: '.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
其他的功能可以在此基础上逐步增加。
【sylar-20170520】
最新文章
- GO 基础(一)
- 我的第一段jQuery代码
- .net加密解密
- Programming Entity Framework CodeFirst--表关系约定
- TCP/IP协议原理与应用笔记23:路由选择模块 和 路由表的设计
- IOS多线程知识总结/队列概念/GCD/主队列/并行队列/全局队列/主队列/串行队列/同步任务/异步任务区别(附代码)
- VIEW层AJAX提交表单到Controller的实体
- DLL入门浅析(5)——使用DLL在进程间共享数据
- VisualStudio中的编辑后期生成事件
- ios 导航栏和旋屏
- ASP.NET Web API 自定义 HttpParameterBinding
- [NOIP 2011]聪明的质监员
- 必须先将 ContentLength 字节写入请求流,然后再调用 [Begin]GetResponse。解决方法
- Oracle 12 Rman增量备份
- 前端开发JS白板编程题目若干
- 调试.vs08
- Vistual Studio XML 智能提示
- 变形CSS3
- [JavaScript] 获取数组中相同元素的个数
- tsort - 拓扑排序
热门文章
- APP被苹果App Store拒绝的79个原因【转】
- 处理json数据的空数据为任意字符
- Go-Redis
- winfrom 实现条形码批量打印以及将条形码信息生成PDF文件
- Linux密码保护
- MVC框架中,遇到 [程序集清单定义与程序集引用不匹配]怎么办?
- map中结构体做关键字的注意事项
- OC中Foundation框架
- ActiveXObject函数详解(转自http://eyesinthesky.iteye.com/blog/1560033)
- hdu3586 Information Disturbing 树形DP+二分