gulp-nodemon 和 gulp-livereload 配置
迁移 Gulp API 初探和 gulp-nodemon gulp-livereload 配置
一、gulp 安装
1. 全局安装:
npm install -g gulp
2. 安装在项目开发环境:
npm install gulp --save-dev
二、gulp-nodemon 和 gulp-livereload 安装
gulp-nodemon 是重启服务器的插件。
gulp-livereload 后端控制前端同步刷新,不过需要依赖 chrome 插件 LiveReload
安装:
npm install gulp-nodemon gulp-livereload --save-dev
为了能让服务器可以控制 chrome 自动刷新,需要安装 LiveReload 插件。
三、gulpfile.js 配置
在工程的目录下,新建 gulpfile.js 文件。如下简单的配置:
'use strict'; //引入 gulp 和 nodemon livereload 插件 var gulp = require('gulp'); var nodemon = require('gulp-nodemon'); var livereload = require('gulp-livereload'); // 一些文件的路径 var paths = { client: [ 'client/javascripts/**/*.js', 'client/stylesheets/**/*.css' ], server: { index: 'app.js' } }; // nodemon 的配置 var nodemonConfig = { script : paths.server.index, ignore : [ "tmp/**", "public/**", "views/**" ], env : { "NODE_ENV": "development" } }; // 使用 nodemone 跑起服务器 gulp.task('serve', ['livereload'], function() { return nodemon(nodemonConfig); }); // 当客户端被监听的文件改变时,刷新浏览器 gulp.task('livereload', function() { livereload.listen(); var server = livereload(); return gulp.watch(paths.client, function(event) { server.changed(event.path); }); }); // develop 任务, 同时开启 serve、livereload 任务 gulp.task('develop', ['serve', 'livereload']);
这里只是分享了关于 gulp-nodemon 与 gulp-livereload 插件的使用。更多 gulp api语法可以查看笔者博文:
相关推荐
前端开源库-gulp-server-livereloadGulp服务器Livereload,运行本地Web服务器的Gulp插件,通过socket.io启用了Livereload。还附带独立的命令行界面。
gulp-nodemon gulp + nodemon +便利安装$ npm install --save-dev gulp-nodemon用法Gulp-nodemon几乎与常规nodemon完全一样,但是它是与gulp任务一起使用的。nodemon([选项]) Gulp-nodemon对象接受一个options对象...
gulp-webserver, 使用LiveReload运行本地web服务器的流媒体插件 web服务器 使用LiveReload运行本地web服务器的流媒体插件提示:这是对吞咽连接的重新编写。安装$ npm install --save-dev gulp-webserver用法gulp.src...
gulp-atom-electron, 封装电子应用的Gulp插件 gulp-atom-electron 安装npm install --save-dev gulp-atom-electron用法可以用两种不同的方法使用这里 MODULE: 将应用程序和/或者英镑打包以下载一个版本的电
布局 标题 描述 修改的 邮政 Gulp-livereload示例,方便进行前端开发 Gulp-livereload示例,方便进行前端开发 2015-07-07 ... 使用npm install --save-dev gulp gulp-watch gulp-livereload命令将npm i
gulp-replace, 一个字符串替换插件 替换 gulp 3的字符串替换插件用法首先,将 gulp-replace 安装为开发依赖项:npm install --save-dev gulp-replace然后,将它添加到你的gulpfile.js:简单字
前端开源库-gulp-cmd-buildGulp Cmd构建,Cmd(seajs)模块一步构建
gulp-gh-pages, gulp插件将内容发布到Github页面 gulp-gh-pages 将内容发布到 Github页面的插件插件插件。安装使用 npm 。npm install --save-dev gulp-gh-pages用法在 gulpfile.j
前端开源库-gulp-bro咕噜兄弟,咕噜 browserify 增量构建,完成正确。
gulp-awspublish, gulp插件将文件发布到 AmazonS3 awspublish 用于gulp的awspublish插件。用法首先,将 gulp-awspublish 安装为开发依赖项:npm install --save-dev gulp-awspublish然后,
前端开源库-gulp-envifygulp envify,gulp插件用于不带browserify的envify。
Gulp-art-include 基于腾讯 artTemplate 的 gulp 前端模版插件,功能类似于 gulp-file-include 插件。在编写模版时可以使用全部 artTemplate 的语法,引用模版时可以传递 JSON 数据用于渲染模版。同时也支持模版...
使用gulp-insert所需要的js代码哦
前端开源库-gulp-expect-filegulp expect file,gulp.js管道中的expect文件
前端开源库-gulp-file-inlinegulp文件inline,内联JS/CSS文件的gulp插件。
前端开源库-gulp-html-minifyGulp HTML迷你,HTML迷你
前端开源库-gulp-ng-constantGulp Ng常量,用于动态生成角度常量模块的Gulp插件。
安装用安装 npm install --save-dev gulp-qiniucdn用法以下示例将显示gulp-qiniu-cdn的最小用法 var gulp = require('gulp'), qiniuCDN = require('gulp-qiniu-cdn');gulp.task('qiniu', function () { return gulp....
前端开源库-gulp-tag-includegulp tag include,html页面之间的相互引用
前端开源库-gulp-nunjucks-htmlGulp Nunjucks HTML,将Nunjucks模板呈现为HTML