grunt项目构建
最近想把项目里添加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 自动生成
grunt项目构建的更多相关文章
- grunt项目构建工具
JS项目构建工具Grunt实践 一:下面来介绍下如何用grunt合并,压缩js文件. 大概步骤有如下: 1. 新建文件夹相对应的项目 比如文件名叫:gruntJs 2. 新建文 ...
- Grunt项目构建-插件学习
听说过Grunt也有两年了,用了也有两年了,然而都是在别人搭好的架子上做开发,当想要对前端工程化整体把控时就一脸懵逼了! Grunt是什么? Grunt是一套web前端工程化构建工具.(ps:关于Gr ...
- 前后端分离之前端项目构建(grunt+require+angular)
前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...
- 前端项目构建工具---Grunt
什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...
- windows本地搭建grunt前端项目构建环境
初学,目前对grunt的理解和需求仅在于简单的文件合并.压缩.语法检查,其强大功能还有待研究. 安装前环境准备 (1)grunt依赖nodejs运行环境,所以要玩grunt得先把nodejs安装好,n ...
- 前端项目构建之yeoman
各位好啊,我又和大家见面了,也许你已经不记得大明湖畔的容嬷嬷,但是只要记得博客园中的我就好,希望我的博客能像一股清风,为你驱散炎热的酷暑,好了,废话不多说,开始上干货,我今天带给大家的是前端工程化开发 ...
- grunt自动化构建工具
一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务, ...
- React学习笔记---项目构建
简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...
- Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)
简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...
随机推荐
- iOS开发之蓝牙使用-建立连接的
1.大佬笔记 CSDN 2.代码 github
- group by 两个或以上条件的分析
首先group by 的简单说明: group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使用group by的两个要素: (1) 出现在select后面的字段 要 ...
- xshell学习笔记
$0:当前Shell程序的文件名dirname $0,获取当前Shell程序的路径cd `dirname $0`,进入当前Shell程序的目录 echo "hvkjvk" > ...
- pg10.1 orafce3.6 安装
安装unzip orafce-mastermv orafce-master /opt/soft_bak/postgresql-10.1/contribcd /opt/soft_bak/postgres ...
- luogu3455 [POI2007]ZAP-Queries 简单的莫比乌斯反演
link ms是莫比乌斯反演里最水的题... 题意:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. 多组询问, T<=50000, ...
- 树莓派安装开源智能家居系统 Domoticz
前言 最近闲来无事开始折腾自己的智能家居系统,对比了几种比较流行的开源智能家居系统,觉得 Domoticz 更适合,Domoticz的官方中文文档,虽然不是很完善但还是可以参考一下.需要注意的是下文用 ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_IL和验证
1.IL 基于栈——所有指令压入一个执行栈,并从栈弹出结果. 2.IL 指令无类型——指令会判断栈中操作数的类型,并执行恰当的操作. 3.IL 最大优势——应用程序的健壮性和安全性. 将 IL 编译成 ...
- 数位dp 简单入门
推荐博客 推荐博客 数位dp是一种计数用的dp,一般就是要统计一个区间[le,ri]内满足一些条件数的个数.所谓数位dp,字面意思就是在数位上进行dp咯.数位还算是比较好听的名字,数位的含义:一个数有 ...
- 解决mac下ssh空闲一段时间自动断开的问题
之前在公司就遇到过这种问题,使用ssh登录linux服务器后,在后台放置一段时间,会发现会自动断开,解决的方法很简单: vim /etc/ssh/ssh_config 添加这2句即可 ServerAl ...
- hdu1166 敌兵布阵 线段树(区间更新)
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...