在 GULP 中按 Ctrl + S 后实时重新加载不起作用
Live reloading not working after Ctrl + S in GULP
我不知道为什么那些用于实时重新加载的任务在我执行的最后一次 Ionic 更新后就消失了。现在我正在尝试解决此问题,但仍然想知道为什么不起作用。我正在关注 this guide here,但仍然看不出我有什么错误。
看到我的一部分gulpfile.js
var paths = {
sass: ['/scss/**/*.scss'],
js: ['www/js/*.js', 'www/js/**/*.js', '!www/js/lib.min.js', '!www/js/code.min.js']
};
gulp.task('compress-lib', function() {
gulp.src([
'./www/lib/ionic/js/ionic.bundle.min.js'
])
.pipe(concat('lib.min.js'))
.pipe(gulp.dest('./www/js'))
});
gulp.task('compress-js', function() {
gulp.src([
'./www/js/app.js',
'./www/js/lines/controller.js',
'./www/js/lines/service.js'
])
.pipe(ngAnnotate())
.pipe(concat('code.min.js'))
.pipe(gulp.dest('./www/js'))
});
// JSHint task
gulp.task('lint', function() {
gulp.src(paths.js)
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({onError: function(e) { console.log(e); } }))
.pipe(autoprefixer('last 2 versions', 'Chrome', 'ios_saf','Android'))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.js, ['lint', 'compress-js']);
});
每次我对文件执行 ctrl + s
,在本例中为 www/js/lines/controller.js
,在控制台上您可以看到如下内容:
[14:41:11] Starting 'lint'...
[14:41:11] Finished 'lint' after 17 ms
[14:41:11] Starting 'compress-js'...
[14:41:11] Finished 'compress-js' after 5.31 ms
JS changed: www/js/lines/controller.js
JS changed: www/js/code.min.js
这意味着有些任务正常工作,但如果我想在视图上看到这些更改,我必须转到控制台并键入 gulp
,你知道为什么应用程序不只是在 ctrl + s
之后重新加载吗?
更新
这就是我要实现的(你可以在我上面粘贴的 link 上看到它):
"The watch task is used to run tasks as we make changes to our files. As you write code and modify your files, the gulp.watch() method will listen for changes and automatically run our tasks again so we don't have to continuously jump back to our command-line and run the gulp command each time"
我知道这可以解决问题,但请使用实时服务器而不是实时重新加载,看看是否可行。因为我过去也遇到过很多live-reload的问题。
npm install live-server
然后:
live-server
注意:确保在键入上面的命令时位于项目目录中。
我不知道为什么那些用于实时重新加载的任务在我执行的最后一次 Ionic 更新后就消失了。现在我正在尝试解决此问题,但仍然想知道为什么不起作用。我正在关注 this guide here,但仍然看不出我有什么错误。
看到我的一部分gulpfile.js
var paths = {
sass: ['/scss/**/*.scss'],
js: ['www/js/*.js', 'www/js/**/*.js', '!www/js/lib.min.js', '!www/js/code.min.js']
};
gulp.task('compress-lib', function() {
gulp.src([
'./www/lib/ionic/js/ionic.bundle.min.js'
])
.pipe(concat('lib.min.js'))
.pipe(gulp.dest('./www/js'))
});
gulp.task('compress-js', function() {
gulp.src([
'./www/js/app.js',
'./www/js/lines/controller.js',
'./www/js/lines/service.js'
])
.pipe(ngAnnotate())
.pipe(concat('code.min.js'))
.pipe(gulp.dest('./www/js'))
});
// JSHint task
gulp.task('lint', function() {
gulp.src(paths.js)
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({onError: function(e) { console.log(e); } }))
.pipe(autoprefixer('last 2 versions', 'Chrome', 'ios_saf','Android'))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.js, ['lint', 'compress-js']);
});
每次我对文件执行 ctrl + s
,在本例中为 www/js/lines/controller.js
,在控制台上您可以看到如下内容:
[14:41:11] Starting 'lint'...
[14:41:11] Finished 'lint' after 17 ms
[14:41:11] Starting 'compress-js'...
[14:41:11] Finished 'compress-js' after 5.31 ms
JS changed: www/js/lines/controller.js
JS changed: www/js/code.min.js
这意味着有些任务正常工作,但如果我想在视图上看到这些更改,我必须转到控制台并键入 gulp
,你知道为什么应用程序不只是在 ctrl + s
之后重新加载吗?
更新
这就是我要实现的(你可以在我上面粘贴的 link 上看到它):
"The watch task is used to run tasks as we make changes to our files. As you write code and modify your files, the gulp.watch() method will listen for changes and automatically run our tasks again so we don't have to continuously jump back to our command-line and run the gulp command each time"
我知道这可以解决问题,但请使用实时服务器而不是实时重新加载,看看是否可行。因为我过去也遇到过很多live-reload的问题。
npm install live-server
然后:
live-server
注意:确保在键入上面的命令时位于项目目录中。