在我转到 1ocalhost:8081 之前，以下代码似乎可以正常工作...
然后我得到消息..
<pre>{"tinylr":"Welcome","version":"0.0.5"}</pre>
我的目录结构是......
____gulp
| |____build
| | |____images
| | |____index.html
| | |____scripts
| | |____styles
| |____gulpfile.js
| |____node_modules
| |____src
| | |____images
| | |____index.html
| | |____scripts
| | |____styles
为什么我的 html 页面没有加载？如果我尝试浏览到 1ocalhost:8081/build/index.html 页面不会加载，我会收到消息
{"error":"not_found","reason":"没有这样的路线"}
我也尝试过 chrome 插件，但是当我点击插件时，我得到了下面的消息
无法连接到 LiveReload 服务器。请确保 LiveReload 2.3（或更高版本）或其他兼容服务器正在运行。
我检查了 Chrome 插件中的插件设置，并检查了文件 url 的选项
这是我的注释代码.....
//sudo npm install gulp -g
// install chrome extension from https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
//Go into the settings from the plugin in Chrome and check the option for file urls: chrome://extensions/
// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
var minifyHTML = require('gulp-minify-html');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var livereload = require('gulp-livereload');
var lr = require('tiny-lr');
var server = lr();
// JS hint task
gulp.task('jshint', function() {
gulp.src('./src/scripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(livereload(server));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './src/images/**/*',
imgDst = './build/images';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst))
.pipe(livereload(server));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './src/*.html',
htmlDst = './build';
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst))
.pipe(livereload(server));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./build/scripts/'))
.pipe(livereload(server));
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['./src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/styles/'))
.pipe(livereload(server));
});
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {
server.listen(8081, function (err) { if (err) return console.log(err);
// watch for HTML changes
gulp.watch('./src/*.html', function() {
gulp.run('htmlpage');
});
// watch for JS changes
gulp.watch('./src/scripts/*.js', function() {
gulp.run('jshint', 'scripts');
});
// watch for IMG changes
gulp.watch('./src/images/*.png', function() {
gulp.run('imagemin');
});
// watch for CSS changes
gulp.watch('./src/styles/*.css', function() {
gulp.run('styles');
});
});
});
</pre>
gulp 的输出看起来不错……
Bills-MacBook-Pro:gulp Bill$ gulp
[gulp] Using file /Users/Bill/gulp/gulpfile.js
[gulp] Working directory changed to /Users/Bill/gulp
[gulp] Running 'imagemin'...
[gulp] Finished 'imagemin' in 77 ms
[gulp] Running 'htmlpage'...
[gulp] Finished 'htmlpage' in 2.47 ms
[gulp] Running 'scripts'...
[gulp] Finished 'scripts' in 4.05 ms
[gulp] Running 'styles'...
[gulp] Finished 'styles' in 1.09 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 1.38 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[gulp] Running 'htmlpage'...
[gulp] Finished 'htmlpage' in 3.5 ms
[gulp] index.html was reloaded.
[gulp] Running 'htmlpage'...
[gulp] Finished 'htmlpage' in 712 μs
[gulp] Running 'htmlpage'...
[gulp] Finished 'htmlpage' in 1.05 ms
[gulp] index.html was reloaded.