Express(Node.js)에서의 개발을 도와주는 grunt-express-server 를 소개하겠습니다.
© 2011 ㅋㅋㅋ G로 폰. 작은 m
via. h tp // w w. g로 흠. 이 m/아니마 ls/552919-인가 t_후 r_ぁp와 p. HTML
grunt-express-server
grunt-express-server
Grunt Plugins Advent Calendar 9일째에, 서버 사이드 개발과의 제휴로 사용하는 grunt-connect-proxy에 대해 소개했습니다만, 계속해 서버 사이드 제휴에 대해서입니다.
-> Grunt Plugins Advent Calendar 9 일째 : 프런트 엔드 만이 아닙니다! 서버 측 개발을 도와주는 grunt-connect-proxy를 소개합니다.
앞두고 긴 죽음.
9일째에는
라고 해설했습니다.
여기에서 Node.js라면 Node.js 측의 .js 파일을 watch 태스크의 대상으로 하고 싶어질 것입니다.
그러나 watch와 같은 작업에서 js 파일의 변경 사항을 보는 것만으로는 괜찮습니다.
서버측의 언어가 인터프리터형이고, 서버의 재기동이 필요하지 않은 경우, 파일의 변경에 대해서 watch 태스크를 사용해 재로드하는 것만으로 OK였습니다.
그러나 Node.js에서 .js 파일을 변경하면 서버를 다시 시작해야 합니다.
거기서 일반적으로 supervisor이나, forever 등으로 .js파일의 변경을 감시, 재기동을 하는 형태로 개발을 하는 것이 많습니다.
이것에 grunt:watich 에서의 js 파일 감시, 브라우저의 LiveReload 가 더해지게 됩니다만, Node 서버의 재기동과 브라우저의 리로드의 타이밍이 문제가 됩니다.
왜냐하면 Node.js를 다시 시작한 후 브라우저를 다시로드해야하지만 파일 변경 모니터링을 다시로드하는 것이 더 빠릅니다.
결정 치기로 일정한 간격을 두면 좋을지도 모르지만, 그래도 역시 실패한다.
그래서 엘라 사람은 생각했습니다. Node.js의 재기동시에 로그 출력을 파이프 해 기동 후 타이밍의 감시하면 좋다고.
그래서 이번에는 Node.js의 Framework Express에서 개발할 때 사용하고 싶은 플러그인 grunt-server-express를 소개합니다.
How to use
npm i -D grunt-express-serverLiveReload도 함께 실시하므로 grunt-contrib-watch 등도 이용하게 된다고 생각합니다.
필요한 패키지는 아래에 요약되어 있으므로 시도해 보는 것이 더 빠를 수 있습니다.
grunt 실행시에 뒤에서 node 서버를 들고 싶기 때문에
options 의 background 항목은 true 로 설정합니다.통상이면
node 명령이 사용됩니다만, 파일의 변경으로 서버의 재기동을 실시하고 싶기 때문에 (이번은) options 의 cmd 항목으로 forever 를 사용하도록 설정하고 있습니다.Gruntfile.js
"use strict";
var LIVERELOAD_PORT, folderMount, listen, lrSnippet, mountFolder, proxySnippet, server;
LIVERELOAD_PORT = 35729;
proxySnippet = require("grunt-connect-proxy/lib/utils").proxyRequest;
mountFolder = folderMount = function(connect, base) {
return connect["static"](require("path").resolve(base));
};
listen = 8000;
server = 3000;
module.exports = function(grunt) {
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
connect: {
front: {
options: {
host: "localhost",
port: listen,
middleware: function(connect) {
return [mountFolder(connect, "."), proxySnippet];
},
open: {
target: "http://localhost:" + listen
},
livereload: true
}
},
proxies: [
{
context: "/",
host: "localhost",
port: server + "",
https: false,
changeOrigin: false
}
]
},
express: {
dev: {
options: {
background: true,
port: server,
cmd: "forever",
args: ["-w"],
script: "app.js",
delay: 0
}
}
},
watch: {
options: {
livereload: true
},
express: {
files: ["app.js", "routes/**/*.js", "views/**/*.jade"],
tasks: ["express:dev"]
},
veiw: {
files: ["public/**/*.{js,css}"]
}
}
});
return grunt.registerTask("server", ["configureProxies", "express:dev", "connect:front", "watch"]);
};
package.json
{
"name": "grunt-express-server-sample",
"version": "0.0.1",
"private": true,
"scripts": {
"preinsall": "npm i -g forever",
"start": "node app.js"
},
"dependencies": {
"express": "3.4.7",
"jade": "*"
},
"devDependencies": {
"grunt-connect-proxy": "~0.1.7",
"grunt-express-server": "~0.4.10",
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3",
"matchdep": "~0.3.0",
"grunt-contrib-connect": "~0.6.0",
"connect-livereload": "~0.3.2"
}
}
후기
이전에 grunt init 패키지로 Express의 LiveReload를 실현하고 싶었고 여러가지 시도했습니다. 아니, 꽤 잘 작동하지 않았습니다.
그런 일을 Twitter에 썼던 곳 @ 요스케_후루카와 감사합니다.
후기 2
proxy 의 설정 없는 편이 알기 쉬웠을지도 ;;
Reference
이 문제에 관하여(Express(Node.js)에서의 개발을 도와주는 grunt-express-server 를 소개하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kamiyam/items/634f330831675192f1ad텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
