Grunt+Livereload 搭建本地前端开发环境

【说明】 本文转载自:http://m.oschina.net/blog/140110

Grunt+Livereload 搭建本地前端开发环境

要解决什么问题?

  • 前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了。

  • 开发angular的时候,官方的chrome插件对file:///的支持不好,所以最好在web浏览器里面。

  • 然后还有livereload – 节省你的F5

  • 用nodejs+connectjs搭建静态web服务

  • 用grunt来做脚本

  • 用livereload来通知文件变更(不需要chrome livereload插件)

  • yeoman angular自带的grunt脚本太旧太重了,所以自己写个。

再具体点:

  1. grunt-contrib-connect 负责启动web服务

  2. connect-livereload负责给middleware,动态在html底部加一条livereload的js

  3. grunt-contrib-watch 监控文件变化并通知

1. 安装依赖

  1. 安装nodejs: http://nodejs.org

  2. 安装gruntjs:npm install -g grunt-cli

  3. 初始化package.json: 在项目根目录下,命令行执行npm init,一路回车。

  4. 安装依赖模块: 在项目根目录下,命令行执行npm install –save-dev grunt matchdep grunt-contrib-connect grunt-contrib-watch connect-livereload grunt-open

2.在根目录放置Gruntfile.js

  1. 注意首字母大写

  2. 修改src:'src/app/'为你的源码目录

  3. 若端口冲突则修改port

/**

* 自动化脚本定义

*/

module.exports = function (grunt) {

'use strict';

//load all grunt tasks

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

//define tasks

grunt.registerTask('server', ['connect:server', 'open:server', 'watch:server']);

//env cfg

var pkg = grunt.file.readJSON('package.json');

var cfg = {

src: 'src/app/',

// Change 'localhost' to '0.0.0.0' to access the server from outside.

serverHost: '0.0.0.0',

serverPort: 9000,

livereload: 35729

};

//grunt config

grunt.initConfig({

//======== 配置相关 ========

pkg: pkg,

cfg: cfg,

//======== 开发相关 ========

//开启服务

connect: {

options: {

port: cfg.serverPort,

hostname: cfg.serverHost,

middleware: function(connect, options) {

return [

require('connect-livereload')({

port: cfg.livereload

}),

// Serve static files.

connect.static(options.base),

// Make empty directories browsable.

// connect.directory(options.base),

];

}

},

server: {

options: {

// keepalive: true,

base: cfg.src,

}

}

},

//打开浏览器

open: {

server: {

url: 'http://localhost:' + cfg.serverPort

}

},

//监控文件变化

watch: {

options: {

livereload: cfg.livereload,

},

server: {

files: [cfg.src + '/**'],

// tasks: [''],

},

}

});

};

3.开始开发吧~

  • 项目根目录下执行 grunt server

  • 将会自动弹出浏览器,访问 localhost:9000 ,如果你端口冲突,在Gruntfile.js里面修改。

  • 试着修改你的源码,保存,然后浏览器就自动刷新了。(别习惯性的按F5哈)

  • 注意:访问的文件必须是HTML,并且有body标签,否则不会插入livereload.js

此条目发表在未分类分类目录,贴了, 标签。将固定链接加入收藏夹。