最近想把项目里添加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 自动生成

最新文章

  1. linux svn 提交文件时强制填写备注
  2. 转载:python发送HTTP请求
  3. js中return,this,arguments,currentStyle和getComputedStyle小析
  4. Codeforces 567D One-Dimensional Battle Ships
  5. Android EditText 文本框实现搜索和清空效果
  6. 阿里云OSS上传图片,并使用图片服务裁切
  7. 基于AppCan MAS系统,如何轻松实现移动应用数据服务?
  8. Joseph cicyle&#39;s algorithm
  9. msi软件包无法安装
  10. Mysql 视图笔记2
  11. hdu 4031 Attack 线段树
  12. 类型萃取(type traits)
  13. Android[安德鲁斯] 文本Air Video 远程播放电脑视频
  14. iOS获取WIFI的IP、子网掩码,以及域名转IP
  15. 从0开始做垂直O2O个性化推荐-以58到家美甲为例
  16. JS DOM事件学习
  17. AI-跨域、垃圾回收、content_type组见、接口处理
  18. Android的Fragment中的互相通信-桥梁activity
  19. Error: Program type already present: com.google.gson.FieldAttributes 的解决方法
  20. oracle安装与备份导入

热门文章

  1. Codeforces Round #538 (Div. 2)D(区间DP,思维)
  2. sap abap 流水号设置
  3. CF1100E Andrew and Taxi 二分答案+拓扑排序
  4. kuangbin专题十六 KMP&amp;&amp;扩展KMP HDU1238 Substrings
  5. Linux防火墙详解
  6. java程序员的从0到1:@Resource与@Autowired的比较
  7. 设置input的样式
  8. rhcs红帽插件及 轮循
  9. Java 初始化和清理
  10. runlevel:启动运行级别(3-13)