출처: http://funnygangstar.tistory.com/m/post/view/id/165
프론트엔드 개발을 하다보면 코드를 고칠때마다 브라우저로 돌아가서 리프레쉬 버튼을 수도 없이 누른
경험이 있었을 것이다.
이에 대한 대안으로 소스를 고치면 자동으로 브라우저가 리프레쉬 될 수 있도록, 브라우저의 확장 프로그램을 쓰거나 하는 경우가 많은데 본인도
이러한 프로그램을 몇개 쓰다가 버그나 프로그램이 불안정해서
차라리 내손이 고생하고 말지라고 다시 예전처럼 리프레쉬 버튼을 누르고 있었다.
그러던중 얼마전부터는 이런 손고생에서 완전히 벗어났다.
난 보통 프론트엔드 개발을 하면서 Grunt.js와 Require.js는 디폴트로 쓰고 있었는데. Grunt.js의 플러그인 중에 livereload.js 가 쓸만하여 가끔 사용하다가 설정이 살짝이 복잡해서 안쓰고 있었다.
그런데. 이 놈이
몇달전 Grunt.js가 버전 4로 업그레이드 되면서 기본 플러그인인 watch 플러그인 안으로
들어가 버렸고 예전보다 훨씬 사용하기
수월해졌다.
이젠 livereload.js도 디폴트로 사용하는 프로그램이 될듯한 예감.
가끔 외국 개발자들 블로그를 보다보면 "If you are not using XXX, you are doing wrong" 이런 문구들
자주 보게되는데, livreload.js도 이런 평가를 들어도 전혀 어색하지 않을듯하다.
사용법은 아래 소스를 참고하시길.
Gruntfile.js
module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), watch : { options: { livereload: true }, less : { tasks : 'less:development', files : ['**/*.less'] }, coffee : { tasks : 'coffee', files : ['**/*.coffee'] }, html : { files : ['**/*.html'] } }, coffee: { compile: { options:{ bare: true, sourceMap : true }, files: [ { expand: true, cwd: './js/', src: ['**/*.coffee'], dest: './js/', ext: '.js' } ] } }, qunit: { all: { options: { urls: ['http://localhost:8080/js/tests/test.html'] } } }, requirejs: { compile: { options: { baseUrl : './js', mainConfigFile: './js/require-config.js', out : './js/app.min.js', locale : "ko-kr", name : 'app', include : ['require-config'], exclude : ['jquery'], optimize : 'none' } } }, less: { development: { options: { paths : ['./less/app'] }, files: { './css/app/app-dev.min.css': './less/app/style.less' } }, production: { options: { paths : ['./less/app'], yuicompress: 'true' }, files : { './css/app/app.min.css': './less/app/style.less' } } } }); // Load tasks from NPM grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-requirejs'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-coffee'); grunt.loadNpmTasks('grunt-contrib-watch'); // register task. grunt.registerTask('default', ['coffee', 'qunit', 'requirejs', 'less']);
|
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-ｅquiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>XDS Viewer</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Development Mode --> <link href="./css/app/app-dev.min.css" rel="stylesheet" /> <!-- Release Mode --> <!--<link href="./css/app/app.min.css" rel="stylesheet" />--> </head> <body> <!-- Development Mode --> <script src="http://localhost:35729/livereload.js"></script> <!-- Release Mode --> <!--<script data-main="./js/app.min" src="./js/vendor/require-jquery.js"></script>--> </body>
|
위의 설정이 끝났으면, 커멘드라인에서
해주면 손고생은 이제 끝 !!!