grunt 合并压缩任务
module.exports = function(grunt) {
// LiveReload的默认端口号,你也可以改成你想要的端口号
var lrPort = 35729;
// 使用connect-livereload模块,生成一个与LiveReload脚本
// <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>
var lrSnippet = require('connect-livereload')({
port: lrPort
});
// 使用 middleware(中间件),就必须关闭 LiveReload 的浏览器插件
var lrMiddleware = function(connect, options) {
return [
// 把脚本,注入到静态文件中
lrSnippet,
// 静态文件服务器的路径
connect.static(options.base),
// 启用目录浏览(相当于IIS中的目录浏览)
connect.directory(options.base)
];
};
// 项目配置(任务配置)
grunt.initConfig({
// 读取我们的项目配置并存储到pkg属性中
pkg: grunt.file.readJSON('package.json'),
// 通过connect任务,创建一个静态服务器
connect: {
options: {
// 服务器端口号
port: 8000,
// 服务器地址(可以使用主机名localhost,也能使用IP)
hostname: 'localhost',
// 物理路径(默认为. 即根目录) 注:使用'.'或'..'为路径的时,可能会返回403 Forbidden. 此时将该值改为相对路径 如:/grunt/reloard。
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本,让页面重新加载。
middleware: lrMiddleware
}
}
},
// 通过watch任务,来监听文件是否有更改
watch: {
client: {
// 我们不需要配置额外的任务,watch任务已经内建LiveReload浏览器刷新的代码片段。
options: {
livereload: lrPort
},
// '**' 表示包含所有的子目录
// '*' 表示包含所有的文件
files: ['html/*.html', 'css/*.css', 'js/*.js', 'images/**/*']
},
},
concat: { //合并任务
js: { //合并任务名字--合并js
files: { //合并文件对应关系
'dist/js/test.js': ['js/*.js'],
}
},
css: { //合并任务名字--合并css
files: {
'dist/css/test.css': ['css/*.css']
}
}
},
cssmin: {
//文件头部输出信息
options: {
banner: '/*creat: <%= new Date() %> */',
compatibility : 'ie8', //设置兼容模式
noAdvanced : true //取消高级特性
//美化代码
beautify: {
//中文ascii化,非常有用!防止中文乱码的神配置
ascii_only: true
}
},
my_target: {
files: [ //文件数组格式,同时允许每个映射拥有附加属性 {'dist/css/common.min.css': ['css/common.css']}, {'dist/css/index.min.css': ['css/index.css'],filter:'isfile'} ]
},
my_target: {
files: { //文件对象格式 'dist/css/common.min.css': ['css/common.css'], 'dist/css/commin.min.css':['css/common.css'] }
}
}
}); // grunt.initConfig配置完毕
// 监控html js css
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('live', ['connect', 'watch']);
grunt.loadNpmTasks('grunt-contrib-concat'); //合并任务
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
grunt 合并压缩任务的更多相关文章
- 使用grunt合并压缩js、css文件
需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...
- grunt 合并压缩js和css文件(二)
具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...
- GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)
一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- 使用grunt完成requirejs的合并压缩和js文件的版本控制
最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...
- 简单使用grunt、bower工具合并压缩js和css
前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些 ...
- grunt 单独压缩多个js和css文件【转】
原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...
- 介绍一种基于gulp对seajs的模块做合并压缩的方式
之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...
- ASP.NET MVC Bundle使用 合并压缩
2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() { BundleCollection.AddDe ...
随机推荐
- Postman用法简介-Http请求模拟工具
在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,现在流行的这种工具也挺多的,像火狐浏览器插件 ...
- 用cmd改计算机名.bat 无需重启电脑生效
echo offset /p cname=请输入计算机名: echo REGEDIT4 >reg.reg echo [HKEY_LOCAL_MACHINE\SYSTEM\CurrentContr ...
- poj 2752 Seek the Name, Seek the Fame【KMP算法分析记录】【求前后缀相同的子串的长度】
Seek the Name, Seek the Fame Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 14106 Ac ...
- 320. Generalized Abbreviation
首先想到的是DFS,对于每个单词的字母都遍历,比如 spy: 1py,s1y,sp1 然后每个遍历完的单词再DFS..左右有数字就合并比如 1py: 11y=>2py, 1p1 这样.. 但是单 ...
- 【转载】nginx 并发数问题思考:worker_connections,worker_processes与 max clients
注:这个文章主要是作者一直在研究nginx作为http server和反向代理服务器时候所谓最大的max_clients和 worker_connections的计算公式, 其实最后的结论也没有卡上公 ...
- VM网络无法连接--提示ethernet0无法连接到虚拟网络
打开 “编辑->虚拟网络设置"里面,点“恢复默认” 如果还不行 然后 开网络和共享中心 左击 本地连接(若是无线网络,则点击无线网络连接)----属性----共享---- 在:允许其 ...
- LINQ 从 CSV 文件生成 XML
本文参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx 下面的代码对字符串数组执行 LINQ 查询. 在 C# 版本中,该查询使用 let ...
- Android中Style和Theme的使用
Style: Style是View中一些属性的集合,包括height,padding,font color,background等等,Style单独定义在xml文件中,类似与web页面中css的角色, ...
- Qt的皮肤设计(Style Sheet)
Qt的皮肤设计,也可以说是对Qt应用程序的界面美化,Qt使用了一种类CSS的样式规则QSS. 一.Style Sheet的应用 1.直接在程序代码中设置样式,利用setStyleSheet()方法 ...
- Android Studio 2.2 External Build
今天在用studio写Native程序时发现2.2版本引入了一个 External Build来进行Native项目的构建. 最直观的表现就是c/c++的源码文件不用跟java文件在一个项目文件夹下了 ...