grunt项目构建
2024-10-20 18:50:47
最近想把项目里添加grunt,说白了就是前端自动化管理,具体配置如下:
用到以下几个部件:
grunt-contrib-cssmin
grunt-contrib-uglify
grunt-contrib-jshint
grunt-contrib-imagemin
grunt-contrib-concat
这几个应该是最常用的几个部件,用于我们页面需要后台部署,所以没有用html压缩。
过几天会把文件合并部件加上,减少http请求。再找一下有没有图片合并的部件,百度的F.I.S就整合了图片合并的部件。
目录结构:
干货。。。
Gruntfile.js
module.exports = function (grunt) { // 构建任务配置
grunt.initConfig({ //读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'), //javascript检查纠错
jshint: {
all: ['Gruntfile.js', 'js/allChose.js', 'js/header.js', 'js/index.js', 'register.js', 'table.js']
}, //压缩js
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'js/',
src: '*.js',
dest: 'dest/js'
}
]
}
}, //文件合并
concat: {
option: {
separator: ';'
},
dist: {
src: ['dest/js/allChose.js', 'dest/js/header.js', 'dest/js/index.js', 'dest/js/register.js', 'dest/js/table.js'],
dest: 'dest/lib.min.js'
}
}, //压缩css
cssmin: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
//美化代码
beautify: {
//中文ascii化,非常有用!防止中文乱码的神配置
ascii_only: true
}
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'style/',
src: '*.css',
dest: 'dest/css'
}
]
}
}, //图片优化
imagemin: {
dist: {
files: [
{
expand: true,
//相对路径
cwd: 'style/image',
src: ['*.{gif,jpg,png}'],
dest: 'dest/img' }
]
}
}
}); // 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin'); // 默认执行的任务
grunt.registerTask('default', ['jshint', 'uglify', 'concat', 'cssmin', 'imagemin']); };
package.json
可以用命令行:npm init 自动生成
最新文章
- linux svn 提交文件时强制填写备注
- 转载:python发送HTTP请求
- js中return,this,arguments,currentStyle和getComputedStyle小析
- Codeforces 567D One-Dimensional Battle Ships
- Android EditText 文本框实现搜索和清空效果
- 阿里云OSS上传图片,并使用图片服务裁切
- 基于AppCan MAS系统,如何轻松实现移动应用数据服务?
- Joseph cicyle&#39;s algorithm
- msi软件包无法安装
- Mysql 视图笔记2
- hdu 4031 Attack 线段树
- 类型萃取(type traits)
- Android[安德鲁斯] 文本Air Video 远程播放电脑视频
- iOS获取WIFI的IP、子网掩码,以及域名转IP
- 从0开始做垂直O2O个性化推荐-以58到家美甲为例
- JS DOM事件学习
- AI-跨域、垃圾回收、content_type组见、接口处理
- Android的Fragment中的互相通信-桥梁activity
- Error: Program type already present: com.google.gson.FieldAttributes 的解决方法
- oracle安装与备份导入
热门文章
- Codeforces Round #538 (Div. 2)D(区间DP,思维)
- sap abap 流水号设置
- CF1100E Andrew and Taxi 二分答案+拓扑排序
- kuangbin专题十六 KMP&;&;扩展KMP HDU1238 Substrings
- Linux防火墙详解
- java程序员的从0到1:@Resource与@Autowired的比较
- 设置input的样式
- rhcs红帽插件及 轮循
- Java 初始化和清理
- runlevel:启动运行级别(3-13)