RENEWING THE GRUNT & LIVERELOAD MAGIC

简介: <p style="margin:0px auto 1.7143em; font-size:1.2em; color:rgb(102,93,84); font-family:ratio,sans-serif; background-color:rgb(230,219,208)"> 英文原文:<a target="_blank" href="http://rhumaric.com/2013

英文原文:http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

不久前, 我写了一篇 explaining how to use grunt and livereload的文章,讲述当HTML, CSS or javascipt发生变化或者改动时,如何自动刷新页面.grunt-livereload插件已经被弃用了,但是我们同样能得到其带来的魔力.看看是如何做的吧!

相同点

如之前那篇文章, 我们将配置grunt为:

  • 载入一个服务来支持你的项目文件 (helps inject the Javascript needed for livereload to work);
  • 打开浏览器访问你的项目 (optional, but saves a little time);
  • 最重要的是当index.html发生改变时自动重新加载页面.

如之前的文章那样,我们会让事情简单一点. 项目中只有index.html文件 (内容任意, 但是确保有一个 <body> 标签).同样的, 你需要在你的机器上安装 Grunt JS . 这也就是说你也需要安装 NodeJS and NPM .

不同点

和之前文章中不同的是,我们需要使用到不同的nodejs 包. 去掉grunt-livereload, 增加grunt-watch (它将替换同样了grunt-regarde).没有grunt-livereload, 我们同样需要注入用于重新加载页面的Javascript. 这就是为什么我们会将grunt-contrib-connect 换成 grunt-express (他有一个可选项可以实现此功能). 换完之后的清单如下:

package.json文件就变成:

1234567891011
 
        
{
"name": "grunt-livereload-renewed",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"matchdep": "~0.1.2",
"grunt-express": "~1.0.0-beta2",
"grunt-contrib-watch": "~0.5.1",
"grunt-open": "~0.2.1"
}
}

我们现在可以在命令行进入项目根目录中执行 npm install安装这些包 .完成后我们就可以配置Grunt了

SERVING AND RECEIVING服务并接受

在深入研究livereload之前, 让我们先看一下其中的一部分逻辑:加载一个服务并自动打开浏览器. Grunt 的配置和之前文章很相似,因为grunt-express和grunt-contrib-connect具有相似的选项 (自少满足了我们的需求). 下面是followingGruntfile.js文件的内容 (to place at the root of your project):

12345678910111213141516171819202122232425262728293031323334353637383940
 
        
// Gruntfile with the configuration of grunt-express and grunt-open. No livereload yet!
module. exports = function( grunt) {
 
// Load Grunt tasks declared in the package.json file
require( 'matchdep').filterDev( 'grunt-*').forEach(grunt.loadNpmTasks);
 
// Configure Grunt
grunt.initConfig({
 
// grunt-express will serve the files from the folders listed in `bases`
// on specified `port` and `hostname`
express : {
all : {
options : {
port : 9000,
hostname : "0.0.0.0",
bases : [ __dirname] // Replace with the directory you want the files served from
// Make sure you don't use `.` or `..` in the path as Express
// is likely to return 403 Forbidden responses if you do
// http://stackoverflow.com/questions/14594121/express-res-sendfile-throwing-forbidden-error
}
}
},
 
// grunt-open will open your browser at the project's URL
open : {
all : {
// Gets the port from the connect configuration
path : 'http://localhost:<%= express.all.options.port%>'
}
}
});
 
// Creates the `server` task
grunt.registerTask( 'server', [
'express',
'open',
'express-keepalive'
]);
};

完成了配置后,在你的命令行中输入grunt server(from the folder of the project, of course)将会在9000端口启动服务并打开http://localhost:9000,这样你就可以访问你的项目了(浏览器中).

自动重新加载

Livereload 通过基于文件的改动通知自动刷新页面,这就说:

  • 当文件被改动时某人需要通知livereload: 这就是grunt-contrib-watch 插件所扮演的角色 (它同样会由livereload启动)
  • 你将需要在你的页面中获取变化后的新内容. 这正是 grunt-express 提供了这样的服务.

这两个任务通过使用livereload都很容易实现, 它提供了一个livereload 选项. 将其设置为true 或者你想要livereload服务运行的端口号(这种情况下要主要要和express设置的端口一致)).

下面就是Gruntfile最后的被容:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
 
        
// Gruntfile with the configuration of grunt-express and grunt-open. No livereload yet!
module. exports = function( grunt) {
 
// Load Grunt tasks declared in the package.json file
require( 'matchdep').filterDev( 'grunt-*').forEach(grunt.loadNpmTasks);
 
// Configure Grunt
grunt.initConfig({
 
// grunt-express will serve the files from the folders listed in `bases`
// on specified `port` and `hostname`
express : {
all : {
options : {
port : 9000,
hostname : "0.0.0.0",
bases : [ __dirname], // Replace with the directory you want the files served from
// Make sure you don't use `.` or `..` in the path as Express
// is likely to return 403 Forbidden responses if you do
// http://stackoverflow.com/questions/14594121/express-res-sendfile-throwing-forbidden-error
livereload : true
}
}
},
 
// grunt-watch will monitor the projects files
watch : {
all : {
// Replace with whatever file you want to trigger the update from
// Either as a String for a single entry
// or an Array of String for multiple entries
// You can use globing patterns like `css/**/*.css`
// See https://github.com/gruntjs/grunt-contrib-watch#files
files : 'index.html',
options : {
livereload : true
}
}
},
 
// grunt-open will open your browser at the project's URL
open : {
all : {
// Gets the port from the connect configuration
path : 'http://localhost:<%= express.all.options.port%>'
}
}
});
 
// Creates the `server` task
grunt.registerTask( 'server', [
'express',
'open',
'watch'
]);
};

grunt服务启动后, 如果你改动了index.html文件, 浏览器将自动重新加载页面. 模拟器可以监听多个文件,但是需要在任务中配置。文档 中有解释.

注意: 如果你在Ubuntu中执行此任务时(或者是其他的linux的发行版本) 并遇到一个监听 ENOSPC 错误, 你也许需要查看它的 Github 说明.

注意: 似乎grunt-express提供了一个监听 选项 来模拟文件的变化并触发livereload. 这样会让Gruntfile更简洁一些. 但是,我更愿意配置一个单独的grunt-contrib-watch任务. 因为我经常需要它去模拟其他文件达到其他目的(YUIDoc, LESS…). 并将概念也进行了区分: grunt-express 提供文件服务, grunt-contrib-watch 模拟他们. 这样很容易找到改动之前的位置, 最后 :这只是个人的偏好)

总结

grunt-contrib-livereload被弃用, 但是livereload通过grunt仍然移植的很好. 更欣慰的是, 其他插件配合他同样做的很好,这样就会让配置更简洁.最后我要感谢 Chandler Van De Water 通知我旧的插件被弃用了,并且让我们享受livereload的魔力吧!

相关文章
|
7月前
|
Linux iOS开发 MacOS
pnpm全局安装报错:Run “pnpm setup“ to create it automatically, or set the global-bin-dir setting, or the PN
pnpm全局安装报错:Run “pnpm setup“ to create it automatically, or set the global-bin-dir setting, or the PN
2145 0
|
4月前
【petalinux 2024.01】petalinux-build时module ‘plnx_vars‘ has no attribute ‘CopyDir‘错误
【petalinux 2024.01】petalinux-build时module ‘plnx_vars‘ has no attribute ‘CopyDir‘错误
105 0
|
7月前
|
Ubuntu Linux 内存技术
Linux(14)Debain Make image and module configuration instructions
Linux(14)Debain Make image and module configuration instructions
32 0
|
数据可视化 Java Shell
JupyterNotebook‘s Magic
JupyterNotebook‘s Magic
87 1
|
并行计算 Ubuntu PyTorch
ImportError:..mmcv/_ext.cpython-36m-x86_64-linux-gnu.so: undefined symbol: _ZNK2at6Tensor6deviceEv解决
ImportError:..mmcv/_ext.cpython-36m-x86_64-linux-gnu.so: undefined symbol: _ZNK2at6Tensor6deviceEv解决
1442 0
add file in debian/source/include-binaries if you want to store the modified binary in the debian
add file in debian/source/include-binaries if you want to store the modified binary in the debian
399 0
|
C++ Windows
编译WINDOWS版SDL2:You should run hg revert SDL_config.h
编译WINDOWS版SDL2:You should run hg revert SDL_config.h
1121 0
成功解决File &amp;quot;f:\program files\python\python36\lib\re.py&amp;quot;, line 142, in &amp;lt;modul
成功解决File &amp;quot;f:\program files\python\python36\lib\re.py&amp;quot;, line 142, in &amp;lt;modul
|
Web App开发 前端开发 JavaScript