分类目录：[构建工具]
Ooo_My_God 发表于
gulp-livereload拯救F5！当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力。
阅读(16621) 评论() 标签： /
Ooo_My_God 发表于
使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】
阅读(15829) 评论() 标签： /
Ooo_My_God 发表于
使用gulp-concat合并javascript文件，减少网络请求。
阅读(13437) 评论() 标签： /
Ooo_My_God 发表于
使用gulp-uglify压缩javascript文件，减小文件大小。
阅读(18612) 评论() 标签： /
Ooo_My_God 发表于
使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存。
阅读(16351) 评论() 标签： /
Ooo_My_God 发表于
使用gulp-minify-css压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。重要：gulp-minify-css已经被废弃，请使用gulp-clean-css，用法一致。
阅读(16911) 评论() 标签： /
Ooo_My_God 发表于
使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片），很多人安装gulp-imagemin都会出现错误，我也查了很多资料，也不知道所以然，我的做法是出错再重新安装，如果你知道问题所在，请一定告诉我！
阅读(18381) 评论() 标签： /
Ooo_My_God 发表于
使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。
阅读(14423) 评论() 标签： /
Ooo_My_God 发表于
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
阅读(52306) 评论() 标签： /
Ooo_My_God 发表于
我们使用gulp来处理静态资源文件，通常将处理好的文件生成到一个新的文件夹，也许会有这么一个疑问，既然都生成到新的文件夹里了，那页面引用不是乱套了？纯属个人观点
阅读(15365) 评论() 标签： /在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
目的：使用gulp-connect实现, 监听html/css/js等文件如有变化, 界面即时自动刷新。测试：我通过官网demo例子代码未能实现，需要自己手动F5刷新。项目目录：
gulpfile.js代码：
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
root: 'app',
port: 8000,
livereload: true
gulp.task('html', function () {
gulp.src('./app/*.html')
.pipe(connect.reload());
gulp.task('watch', function () {
gulp.watch(['./app/*.html'], ['html']);
gulp.task('default', ['connect', 'watch']);
index.html代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
请问各位大大，那里错了或者那里需要调整吗？
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。7.4k 次阅读
webpack 提供了 webpack-dev-server 可以实现高效的页面自动刷新，但是这个 server 有一点局限性：
虽然可以做为 server 中间件使用，但本身不提供其它资源的静态服务
对于打包文件以外的变化它是无知的，也就无法去刷新
如果是自己的页面需要引入 script，修改配置 entry，自己另外提供文件服务，步骤繁琐
现在假设我们有自己的 html 页面，页面引入了本地的 css，但是 js 是由 webpack 打包的，需要实现文件修改自动刷新的页面的话我们需要以下几个模块：
文件监视 - gulp.watch()
静态资源服务 - gulp-serve 模块
livereload服务 (负责接受变化请求并通知页面刷新) - gulp-livereload 模块
自动添加 livereload 前端脚本 - connect-livereload 模块 (或者使用livereload浏览器插件）
代码如下：
// npm i gulp-serve gulp-livereload webpack gulp-util gulp connect-livereload -D
var serve = require('gulp-serve')
var livereload = require('gulp-livereload')
var webpack = require('webpack')
var gutil = require('gulp-util')
var gulp = require('gulp')
var webpackConfig = require('./webpack.config.js')
var inject = require('connect-livereload')()
var path = require('path')
var myConfig = Object.create(webpackConfig)
// for debugging
myConfig.devtool = 'sourcemap'
myConfig.debug = true
var paths = {
scripts: ['index.js'],
// file list for watching
asserts: ['*.css', 'index.html']
gulp.task('default', ['build-dev'])
gulp.task('build-dev', ['webpack:build-dev', 'serve'], function () {
livereload.listen({
start: true
// build js files on change
gulp.watch(paths.scripts, ['webpack:build-dev'])
var watcher = gulp.watch(paths.asserts)
watcher.on('change', function (e) {
livereload.changed(e.path)
// static server
gulp.task('serve', serve({
root: [__dirname],
// inject livereload script ot html
middleware: inject
var devCompiler = webpack(myConfig)
var outputFile = path.resolve(myConfig.output.path, myConfig.output.filename)
gulp.task('webpack:build-dev', function (callback) {
devCompiler.run(function (err, stats) {
if (err) throw new gutil.pluginError('webpack:build-dev', err) //eslint-disable-line
gutil.log('[webpack:build-dev]', stats.toString({
colors: true
livereload.changed(outputFile)
callback()
这种做法最大的好处就是 html 和 css 不用都让 webpack 去处理也能做到自动刷新，但是相比 webpack-dev-server, 它是JS全部重新打包的，所以性能会差很多，此时我们可以使用 webpack-dev-server 实现打包文件的监听，同时让原来后台提供其它文件服务。假设后台使用 3000 端口，我们使用 webpack-dev-server inline模式需要如下配置：
gulp.task('webpack:dev-server', function () {
var devServerConfig = Object.create(myConfig)
// webpack need this to send request to webpack-dev-server
devServerConfig.output.publicPath = 'http://localhost:8080/'
devServerConfig.plugins = devServerConfig.plugins || []
devServerConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
// inline mode
devServerConfig.entry.unshift('webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server')
var compiler = webpack(devServerConfig)
new WebpackDevServer(compiler, {
contentBase: 'http://localhost:3000/',
// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
historyApiFallback: false,
// Don't forget this for dev-server
publicPath: '/build/',
lazy: false,
}).listen(8080, 'localhost', function (err) {
if (err) throw new gutil.PluginError('webpack-dev-server', err)
// Server listening
gutil.log('[webpack-dev-server]', 'http://localhost:8080/')
gulp webpack:dev-server 现在可以启动服务了，但同时请求 bundle.js script也要修改为：
&script src="http://localhost:8080/bundle.js" type="text/javascript" charset="utf-8"&&/script&
这样 webpack-dev-server 才能进行热加载。
还有一种看起来更好的方式是使用 proxy 来代理，此时你访问 webpack-dev-server时它无法处理的请求都会转发给你的后台服务，配置起来相比上面要简单一些：
html 页面无需修改
config.output.publicPath 使用原来的相对路径
webpack-dev-server 配置 proxy 选项
gulp.task('webpack:dev-server', function () {
var devServerConfig = Object.create(myConfig)
// webpack need this to send request to webpack-dev-server
devServerConfig.plugins = devServerConfig.plugins || []
devServerConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
// inline mode
devServerConfig.entry.unshift('webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server')
var compiler = webpack(devServerConfig)
new WebpackDevServer(compiler, {
// contentBase: {target: 'http://localhost:3000/'},
// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
historyApiFallback: false,
'*': 'http://localhost:3000'
publicPath: '/build/',
lazy: false,
}).listen(8080, 'localhost', function (err) {
if (err) throw new gutil.PluginError('webpack-dev-server', err)
// Server listening
gutil.log('[webpack-dev-server]', 'http://localhost:8080/')
这么做只需要访问 webpack-dev-server 就可以直接访问页面，其它设备通过 ip 也能直接访问到，免去了修改的麻烦。其实 webpack-dev-server 如果可以直接添加静态文件服务的功能，我们有时就不必折腾的这么麻烦了，大概是作者不想破坏它功能上的简洁以及避免滥用导致不良的后果吧。
1 收藏&&|&&38
请问有完整的示例么
请问有完整的示例么
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。　　早就想要自动自动自动刷新了啊，曾经用grunt实现过，但是是yeoman建好的。。其中很多任务我是用不到的啊，为了干净还是得要自己写啊哈哈（现在我只想要自动刷新）。
　　首先node是必须的了～就不说怎么装了。
　　然后先建好文件夹，安装gulp和gulp-livereload，执行：
cnpm install gulp gulp-livereload
　　以上用了淘宝镜像，也可以用npm安装，只是个demo，没有package.json，然后创建gulpfile.js，如下：
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function() {
livereload.listen();
gulp.watch('app/**/*.*',function(file){
livereload.changed(file.path);
　　大概意思是监听app文件夹里所有文件，如果有变化就发送给livereload服务器。gulp-livereload原话如下：
livereload.changed(path)
Alternatively, you can call this function to send changes to the livereload server. You should provide either a simple string or an object, if an object is given it expects the object to have a&path&property.
　　再你还要建个app文件夹，然后在里面写个demo.html试试。随便写点～稍后有奇效。然后执行：
gulp watch
　　在浏览器上访问localhost:35729（这东西默认的端口），会看到：
　　"tinylr": "Welcome",
　　"version": "0.1.6"
　　但其实并没什么x用哈哈哈～～不管怎么折腾路径还会告诉你no such route啊！
　　"error": "not_found",
　　"reason": "no such route"
　　是！因！为！。。看github的grunt问答环节原话：
The livereload in this task only handles livereloading. It doesn't provide a static file server. You would use&grunt-contrib-connect&or some other method to serve files (express, restify, jaws, apache, nginx, etc).
The chrome live reload extension will create a connection through a socket to the livereload server this watch task has started on 35729. When the watch task is triggered it informs the livereload server which then through the socket will inform the chrome extension and reload the necessary portions of the page.
I agree though we need better docs explaining this as you're not the first person to get tripped up by this.
　　歌词大意是：在这个任务中livereload只处理livereloading，它不提供静态文件服务器。。。
　　所以还需要装个http-server,我应该早点说的。。欧～我好坏喔，这里我全局装啦，像这样：
cnpm install http-server -g
　　用npm是可以的。。只要不嫌慢。
　　还需要个chrome插件：，这个是真慢。。
　　然后关掉之前的gulp watch吧，可以先进到app目录下，其实在项目根目录也是可以de～，执行：
http-server
　　然后在项目根目录下继续：
gulp watch
　　http-server默认端口是8080,所以可以通过访问localhost:8080找到你要的自动刷新的那个demo文件。再确保已经安装了liveReload插件～点开它，像这样（右边那个刷新里有实心圈）：
　　然后你就可以尽情的保存保存了～会刷新。。尊的不用F5 || cmd R了。。
　　附上DEMO：
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
之前都有一直看gulp的配置，但本人想用gulp配置服务器，想使用gulp开启两个进程，但我不知道如何下手，高手们有什么资料可以给我参考下如何使用gulp配置本地服务器吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一、可以用connect建一个本地服务器
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('server', function() {
connect.server({
livereload: true,
port: 8080
然后gulp server就从 localhost:8080打开页面了
二：可以使用其他插件,比如browser-SYNC
var gulp = require('gulp'),
//加载package.json中所需依赖
$ = require('gulp-load-plugins')({
pattern: '*',
gulp.task('browserSync', ['sass'], function() {
$.browserSync({
baseDir: 'app',// 从这个项目的根目录启动服务器
gulp.task('serve', ['sass', 'browserSync'], function() {
gulp.watch('app/js/**/*.js').on('change', reload);
三、代理其他本地服务器比如用python建一个临时本地服务器：python -m http.server 8080(对应ip4协议的地址)然后gulp使用代理方式映射这个：--proxy "localhost:8080(或192.168.x.x:8080)"
四、其他N多插件实现
除了上面那些方式，还有gulp-livereload、gulp-webserver等等可以建立本地服务器，甚至可以模拟ajax...自行百度谷歌吧..
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。