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控制 ...
随机推荐
- Gazebo学习随记3 图形界面的使用
直接写模型的SDF文件实在是太反人类啦! 可以在gazebo图形界面中设置好模型的链接(碰撞外观惯性),关节等等参数-然后生成SDF文件
- appium报错信息:Could not extract PIDs from ps output. PIDS: [], Procs: ["bad pid 'uiautomator'"]”
appium+Java 自动化测试真机测试时报错“info: [debug] Error: Could not extract PIDs from ps output. PIDS: [], Procs ...
- MySQL数据库之插入显示图片
图书馆系统项目需要用到好多图片,并且要求存入到数据库中,对这个特别感兴趣,于是上网查了资料,采用C#语言,进行了具体实现. 说明: 功能:往MySQL数据库插入并显示图片: 验证:执行插入功能后,我把 ...
- 三大文本处理工具grep、sed及awk
一. 用grep在文件中搜索文本 grep能够接受正则表达式,生成各种格式的输出.除此之外,它还有大量有趣的选项. 1. 搜索包含特定模式的文本行: 2. 从stdin中读取: 3. 单个g ...
- ABAP F4使用总结!!
PARAMETERS: p_werks LIKE t001l-werks , p_lgort LIKE t001l-lgort . SELECTION-SCREEN SKIP. ...
- P4234 最小差值生成树 LCT维护边权
\(\color{#0066ff}{ 题目描述 }\) 给定一个标号为从 \(1\) 到 \(n\) 的.有 \(m\) 条边的无向图,求边权最大值与最小值的差值最小的生成树. \(\color{#0 ...
- NOIP2018初赛总结(提高组)(试题+答案+简要解析)
NOIP2018初赛总结(提高组) 更新完毕(纯手敲),如果有错误请在下面留言 单选题 T1.下列四个不同进制的数中,与其它三项数值上不相等的是 A.\((269)_{16}\) B.\((617)_ ...
- zabbix监控tcp连接数的脚本!!
#!/bin/bash #this script is used to get tcp and udp connetion status #tcp status metric=$ tmp_file=/ ...
- C++_对象之间的关系与继承
派生类和基类之间的特殊关系是基于C++继承的底层模型的. 实际上,C++有3种继承方式:公有继承.保护继承.私有继承. 公有继承是最常见的关系,它建立一种is-a的关系,即派生类对象也是一种基类,可以 ...
- Kibana6.2.x 插件理解
官方地址:https://www.elastic.co/guide/en/kibana/current/development-uiexports.html Type Purpose hacks An ...