gullowfile.js中没有使用gullowwatch和gullowserver livereload更新样式
Styles are not being updated in gulpfile.js using gulp-watch and gulp-server-livereload
如果我对样式表进行了更改,则样式将被重新加载,但只加载一次。我需要在所有更改后重新加载样式。
我是使用任务管理器的新手,所以任何帮助都将不胜感激。
gullfile.js
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-ruby-sass'),
server = require('gulp-server-livereload'),
bower_files = require('bower-files')(),
inject = require('gulp-inject'),
del = require('del'),
watch = require('gulp-watch'),
batch = require('gulp-batch'),
jasmine = require('gulp-jasmine'),
karma = require('karma').server,
src = 'app/',
dest = 'dist/',
cssDestFolder = src,
cssStyle = 'compressed',
serverSrc = dest;
/**
* Set distribution environment
*/
gulp.task('set-env-dist', function () {
cssDestFolder = dest;
cssStyle = 'compressed';
serverSrc = dest;
});
/**
* Set development environment
*/
gulp.task('set-env-dev', function () {
cssDestFolder = src;
cssStyle = 'expanded';
serverSrc = src;
});
/**
* Run test once and exit
*/
gulp.task('test', function (done) {
karma.start({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, done);
});
/**
* Concatenate and compress bower
*/
gulp.task('bower', function () {
gulp.src(bower_files.ext('js').files)
.pipe(concat('bower.min.js'))
.pipe(uglify())
.pipe(gulp.dest(dest));
});
/**
* Run server
*/
gulp.task('webServer', function () {
gulp.src(serverSrc)
.pipe(server({
livereload: true,
log: 'debug',
open: true
}));
});
/**
* Compress sass
*/
gulp.task('styles', function () {
console.log('in styles')
return sass(src + 'app.scss', {style: cssStyle})
.pipe(gulp.dest(cssDestFolder));
});
/**
* Concatenate and compress js
*/
gulp.task('scripts', function () {
return gulp.src([
src + 'app.js',
src + 'components/**/*.js',
src + '**/*.js',
'!' + src + 'bower_components/**/*.js',
'!' + src + 'components/**/*.spec.js',
'!' + src + '**/*.spec.js'
])
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(dest));
});
gulp.task('watch', function () {
watch([
'app/**/*.scss',
'app/app.scss'
], batch(function () {
gulp.start('styles');
}));
});
gulp.task('build-dist', ['set-env-dist', 'scripts', 'styles', 'bower']);
gulp.task('serve-dist', ['set-env-dist', 'webServer', 'watch']);
gulp.task('serve', ['set-env-dev', 'sass', 'webServer']);
我从未使用过gulp-batch
,但您在watch
中只运行了一个gullow任务。试试这个,
gulp.task('watch', function () {
watch([
'app/**/*.scss',
'app/app.scss'
], ['styles']);
});
相关文章:
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 更改li标记文本的Javascript
- 完全可链接的li元素
- 使用jquery动态创建ul-li
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 使用下拉列表筛选列表(ul>li)
- 在bootstrap中显示隐藏特定的li
- AngularJS Navigation (li ng-repeat, create header li), DOM
- 使用Jquery在li内部获取具有特定文本的锚点
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- 如何将li类更改为li id's在Jquery中
- ul-li专属功能
- 在LI点击时更改类
- 如何使用jquery显示具体的li数
- 一个接一个地淡出每一个li
- 使用li元素的html内容更改该元素的背景
- 修复列表的绝对位置(li's隐藏在前两个后面)
- 如何在选择子li时将父li类设置为活动
- 使用jquery显示特定的li标记