您的位置:首页 > Web前端

Gulp+browser-sync打造前端开发自动刷新

2016-08-23 19:55 686 查看
以下是gulpfile.js:
var gulp = require('gulp'),
config = require('./config'),
cleanCss = require('gulp-clean-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
browserify = require('gulp-browserify'),
nodemon = require('gulp-nodemon'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
sass = require('gulp-sass'),
replace = require('gulp-replace'),
browserSync = require('browser-sync').create();

gulp.task('sass', function () {
return gulp.src('client/sass/main.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('client/sass/sass2css'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCss())
.pipe(gulp.dest('client/css/export'))
.pipe(browserSync.reload({stream: true}));
});

gulp.task('clean', function (callback) {
del(['client/css/export/*.min.css'], callback);
});

gulp.task('watch', function () {
browserSync.init({
proxy: 'localhost:' + config.listenPort
});

gulp.watch('client/sass/main.scss', ['sass']);
gulp.watch('views/pages/*.jade', browserSync.reload);
});

gulp.task('serve', function () {
return nodemon({
script: 'app.js',
ignore: [
"client/**",
"views/**"
]
});
});

gulp.task('develop', ['watch', 'serve']);
有了这个,开发就很有乐趣了。参考:http://www.browsersync.cn/docs/gulp/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息