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" 实施刷新 ...
随机推荐
- swift学习笔记 - 判断当前运行的系统和平台
最近代码需要判断代码运行的系统与平台,下面总结了一下swift下一些可以用来判断的属性: // 代码运行在32位的 Windows public var TARGET_OS_MAC: Int32 { ...
- mysql分库分表(二)
mysql分库分表 参考: https://www.cnblogs.com/dongruiha/p/6727783.html https://www.cnblogs.com/oldUncle/p/64 ...
- 爬虫框架Scrapy之CrawlSpiders
CrawlSpiders 通过下面的命令可以快速创建 CrawlSpider模板 的代码: scrapy genspider -t crawl tencent tencent.com 上一个案例中,我 ...
- 哥德巴赫猜想-nefu2 & 分拆素数和 hdu2098
哥德巴赫猜想-nefu2 & 分拆素数和 hdu2098 //哥德巴赫猜想 #include <iostream> #include <cmath> #include ...
- 解题报告：poj1061 青蛙的约会 - 扩展欧几里得算法
青蛙的约会 writer:pprp Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 119716 Accepted: 25238 ...
- 一个带展示的jsp上传控件模型
带展示上传控件的基本模型,无样式 jsp部分: <td> <form id="form1" enctype="multipart/form-data&q ...
- 关于Spring Test 小结
1.>public class CustomerPackagePrealertControllerTest extends WebSpringBaseTest{} 2.> @WebApp ...
- codeforces291E Tree-String Problem
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- bzoj 1270: [BeijingWc2008]雷涛的小猫 简单dp+滚动数组
1270: [BeijingWc2008]雷涛的小猫 Time Limit: 50 Sec Memory Limit: 162 MB[Submit][Status][Discuss] Descrip ...
- Linux系统 SSHD服务安全优化方案
# 1. 修改默认端口 #Port 22 # 2. 修改监听协议,只监听某个或某些网络协议 #AddressFamily any AddressFamily inet # 3. 修改ssh只监听内 ...