grunt实现修改代码实时刷新浏览器
watch: {
js: {
files: ['src/js/**/*.js'],
tasks: ['clean', 'jshint', 'copy', 'concat:concatsass', 'sass', 'concat:build', 'uglify', 'includereplace', 'usemin'],
options: {
livereload: true
}
}
}
grunt.registerTask('dev', [ 'watch']);
然后启动本地服务器打开我们的页面（wamp/node/sublimeServer/ ）
var serveStatic = require('serve-static');
var serveIndex = require('serve-index');
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,
// 静态文件服务器的路径
serveStatic(options.base[0]),
// 启用目录浏览(相当于IIS中的目录浏览)
serveIndex(options.base[0])
];
};
connect: {
options: {
// 服务器端口号
port: 8000,
// 服务器地址(可以使用主机名localhost，也能使用IP)
hostname: 'localhost',
// 物理路径(默认为. 即根目录) 注：使用'.'或'..'为路径的时，可能会返回403 Forbidden. 此时将该值改为相对路径 如：/grunt/reloard。
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本，让页面重新加载。
middleware: lrMiddleware
}
}
},
watch: {
js: {
files: ['src/js/**/*.js'],
tasks: ['clean', 'jshint', 'copy', 'concat:concatsass', 'sass', 'concat:build', 'uglify', 'includereplace', 'usemin'],
options: {
livereload: lrPort
}
}
},
grunt.registerTask('dev', [ ‘connect','watch’])
,然后启动grunt dev
module.exports = function(grunt) {
var timestamp = new Date().getTime();
var serveStatic = require('serve-static');
var serveIndex = require('serve-index');
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,
// 静态文件服务器的路径
serveStatic(options.base[0]),
// 启用目录浏览(相当于IIS中的目录浏览)
serveIndex(options.base[0])
];
};
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
// 服务器端口号
port: 8666,
// 服务器地址(可以使用主机名localhost，也能使用IP)
// 物理路径(默认为. 即根目录) 注：使用'.'或'..'为路径的时，可能会返回403 Forbidden. 此时将该值改为相对路径 如：/grunt/reloard。
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本，让页面重新加载。
middleware: lrMiddleware
}
}
},
watch: {
js: {
files: ['src/js/*.js','!src/js/index.js','src/sass/*.scss','src/*.html','!src/sass/all.scss'],
tasks: ['clean' ,'concat:concatsass', 'concat:dev','sass','uglify:build','copy','cssmin:build', 'usemin'],
options: {
livereload: lrPort
}
}
},
//文件合并
concat: {
options: {
//定义一个用于插入合并输出文件之间的字符
seperator: ';'
},
prod: {
//将要合并的文件
// src:['src/**/*.js'],
//合并后的js文件的存放位置
// dest:['build/<%= pkg.name %>.js']
files: { // Dictionary of files
'src/css/main.css': ['src/css/*.css'],
'src/js/index.js': ['src/js/*.js',"!src/js/env_dev.js",'!src/js/*.min.js'],
}
},
dev: {
files: { // Dictionary of files
'src/css/main.css': ['src/css/*.css'],
'src/js/index.js': ['src/js/*.js',"!src/js/env_prod.js",'!src/js/*.min.js'],
}
},
concatsass: {
files: {
'src/sass/all.scss': ['src/sass/*.scss']
}
}
},
//压缩js
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
files:{
'dist/js/index.min.js':'src/js/index.js',
}
}
},
//压缩html
htmlmin: {
options: { // Target options
removeComments: true,//去注释
removeCommentsFromCDATA: true,
collapseWhitespace: true // 去换行
},
html: {
files: [{ // Dictionary of files
expand: true,
cwd: 'dist',
src: ['*.html'],
dest: 'dist' //'destination':'source'
}]
}
},
//css压缩
cssmin: {
options: {
//shorthandCompactiong:false,
roundingPercision: -1 //这个属性应该是将样式相同的都提取出来
},
build: {
files: {
'dist/css/main.min.css': 'src/css/main.css',
}
}
},
//处理html中css、js 引入合并问题
usemin: {
html: 'dist/*.html',
options: {
blockReplacements: {
js: function(block) {
return '<script type="text/javascript" src="' + block.dest + '?t=' + timestamp + '"></script>';
},
css: function(block) {
return '<link rel="stylesheet" type="text/css" href="' + block.dest + '?t=' + timestamp + '"/>';
}
}
}
},
//copy
copy: {
src: {
files: [
{ expand: true, cwd: 'src/css', src: ['*.min.css'], dest: 'dist/css' },
{ expand: true, cwd: 'src/js', src: ['*.min.js'], dest: 'dist/js' },
{ expand: true, cwd: 'src/', src: ['*.html'], dest: 'dist' },
]
},
image: {
files: [
{ expand: true, cwd: 'src/images', src: ['*.{png,jpg,jpeg,gif,ico}'], dest: 'dist/images' }
]
}
},
sass: {
dist: {
options: { // Target options
style: 'expanded'
},
files: {
'src/css/all.css': 'src/sass/all.scss'
}
}
},
//清理文件
clean: {
html: ['dist/*.html'],
sass: ['src/sass/all.scss'],
css: ['dist/css','src/css/main.css'],
js: ['dist/js','src/js/index.js'],//,
images: ['dist/images']
}
});
//加载包含"uglify" 任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
//grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-include-replace');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
//默认被执行的任务列表
grunt.registerTask('devT', ['connect','watch'])
grunt.registerTask('prod', ['clean' ,'concat:concatsass','sass', 'concat:prod','uglify:build','copy','cssmin:build','htmlmin' , 'usemin']);
grunt.registerTask('dev', ['clean' ,'concat:concatsass', 'sass','concat:dev','uglify:build','copy','cssmin:build', 'usemin']);
};
9.package.json
{
"name": "applicationForm",
"version": "0.1.0",
"description": "",
"main": "Gruntfile.js",
"directories": {
"test": "test"
},
"dependencies": {
"grunt-sass": "^1.1.0"
},
"devDependencies": {
"connect-livereload": "^0.6.0",
"grunt": "^0.4.5",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-coffee": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-htmlmin": "^1.4.0",
"grunt-contrib-requirejs": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-usemin": "^3.1.1",
"properties-reader": "^0.0.15",
"serve-index": "^1.8.0",
"serve-static": "^1.11.1"
},
"scripts": {
"start": "grunt devT",
"prod": "grunt prod",
"dev": "grunt dev"
},
"author": "liheyao",
"license": "ISC"
}
grunt实现修改代码实时刷新浏览器的更多相关文章
- webpack实现修改代码实时刷新浏览器
webpack例子:https://github.com/Aquarius1993/webpackDemo 1. 需要全局和项目安装webpack和webpack-dev-server npm ins ...
- webpack热加载：修改文件自动刷新浏览器并更新
概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...
- npm scripts 助力前端开发，实时刷新浏览器
用browser-sync或者lite-server来监控文件的改变,当文件改变时,就自动刷新浏览器. 用node-sass来实时编译scss文件. 用parallelshell来异步执行npm sc ...
- struts2中修改Action后刷新浏览器后不能及时更新
在学习strut2的时候,发现如果修改配置文件中Action的时候,刷新浏览器并不能加载修改后的Action,只能关闭服务,重新开启server才能获取到,上网找了许多资料后发现只要在配置文件中加上下 ...
- zTree实现节点修改的实时刷新
一.应用场景 在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了. 二.项目实践 比如要在test1234节点下新建子节点,首先要选中test1234节点,添 ...
- 利用less监视模式实时预览样式刷新浏览器
[前言]此处介绍的方法只是我个人的用法,相信大家有更好更简洁的方式. 上次写到利用LiveReload解放F5.而且LiveReload可以编辑sass/less/stylus.但是可惜发现LiveR ...
- gulp使用 实现文件修改实时刷新
gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://regist ...
- 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器
http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...
- VSCode中代码在浏览器中打开及实时刷新
实时刷新方法一: 在项目目录下运行命令: browser-sync start --server --files "**/*.css,**/*.html,**/*.js" 实施刷新 ...
随机推荐
- Matlab绘图基础——colormap在数字图像处理及三维图形展示上的应用（分层设色）
色图(color map)是MATLAB系统引入的概念.在MATLAB中,每个图形窗口只能有一个色图. 色图是m×3 的数值矩阵,它的每一行是RGB三元组.色图矩阵可以人为地生成 ...
- 程序员清理xcode垃圾命令
xcrun simctl list devices xcrun simctl delete unavailable
- JAVA小工具打包
D: cd D:\xxx\IPOSpider javac -d bin/ src/com/xxx/IPOSpider.java src/com/xxx/ConfigProperties.java -c ...
- [转]3个著名加密算法(MD5、RSA、DES)的解析
MD5的全称是Message-Digest Algorithm 5,在90年代初由MIT的计算机科学实验室和RSA Data Security Inc发明,经MD2.MD3和MD4发展而来. ...
- nlp基本知识点(不断更新)
1.精确率与召回率 召回率也称为查全率,指的是:你查询到的相关数目/(你查询到的相关的数目+你没有查询到的相关的数目). 精确率: A/A+B 召回率:A/A+C 再比如: 我 是 中国人 这里正确的 ...
- 测试Python类成员的单下划线，双下划线，两头下划线的区别
首先原谅一个菜鸟叫他“两头下划线”.记得在windows编程中,很多宏定义使用下划线+大写,给人逼格很高的错觉.对于Python下划线的认识,大概是从__dict__这个属性开始的,看__dict__ ...
- 安装webpack命令环境
1.通过cnpm安装webpack命令环境,如图 2.安装完后查看webpack的版本,如图
- MySQL 乐观锁 悲观锁 共享锁 排他锁
乐观锁 乐观锁是逻辑概念上的锁,不是数据库自带的,需要我们自己去实现.乐观锁是指操作数据库时(更新操作),想法很乐观,认为这次的操作不会导致冲突,在操作数据时,并不进行任何其他的特殊处理(也就是不加锁 ...
- 定时模块app_timer用法及常见问题—nRF5 SDK模块系列二
app_timer是大家经常用到的一个库,app_timer的功能就是定时,也就是说,你在某一时刻启动一个app timer并设定超时时间,超时时间一到,app_timer就会回调timeout ha ...
- 高质量的C++博客
陈硕 :http://blog.csdn.net/Solstice 孟岩: http://blog.csdn.net/myan