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的魔力吧!

相关文章
npm WARN deprecated core-js@2.6.12 core-js@<3.3 is no longer maintained and not recommended for usa
npm WARN deprecated core-js@2.6.12 core-js@<3.3 is no longer maintained and not recommended for usa
481 0
|
7月前
|
JavaScript 前端开发 编译器
Cmake 中 compiler_depend.ts 文件:解析和使用 C/C++ 预编译头文件
Cmake 中 compiler_depend.ts 文件:解析和使用 C/C++ 预编译头文件
167 1
|
自然语言处理 JavaScript 前端开发
详解 clang-format 配置选项(基于 clang 8.0.0)
基于 clang 8.0.0 详解 clang-format 中涉及 C/C++ 配置选项的含义,跳过不相关的语言配置选项如 Java, Objective-C, JavaScript。
2918 0
|
Linux
内核模块的文件格式与EXPORT_SYMBOL的实现
内核模块的文件格式与EXPORT_SYMBOL的实现
134 0
|
机器人 Linux 编译器
替代notepad++,notepad--介绍及插件cmake编译
替代notepad++,notepad--介绍及插件cmake编译
|
JavaScript
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
How to convert QMake to CMake
How to convert QMake to CMake
605 0
|
C++ Windows
编译WINDOWS版SDL2:You should run hg revert SDL_config.h
编译WINDOWS版SDL2:You should run hg revert SDL_config.h
1111 0