作者: | 来源:互联网 | 2023-09-09 19:18
以下是gulpfile.js:vargulprequire(‘gulp‘),configrequire(‘.config‘),cleanCssrequire(‘gulp-cle
以下是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/
Gulp+browser-sync打造前端开发自动刷新