当我运行 gulp 时，所有内容都会编译到另一个 dist 文件夹中。页面会自动加载，但加载后，脚本会显示，直到我再次重新加载页面。不确定是什么问题。
gulp 文件
var gulp = require('gulp');
var argv = require('yargs').argv;
var gulpIf = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var cssnano = require('gulp-cssnano');
var bourbon = require('node-bourbon').includePaths;
var neat = require('node-neat').includePaths;
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var rename = require('gulp-rename');
var htmlreplace = require('gulp-html-replace');
var runSequence = require('run-sequence');
var sizereport = require('gulp-sizereport');
var htmlmin = require('gulp-html-minifier');
var webpack = require('webpack-stream');
gulp.task('browserSync', function(){
browserSync({
server: {
baseDir: 'dist'
},
browser: "google chrome"
});
});
/* --- WEBPACK --- */
gulp.task('webpack', function() {
return gulp.src('app/assets/js/main.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulpIf(argv.production, uglify()))
.pipe(gulpIf(argv.production, rename({suffix:'.min'})))
.pipe(gulp.dest('dist/assets/js/'))
.pipe(browserSync.reload({stream:true}))
});
/* --- STYLE TASKS--- */
gulp.task('styles',function(){
return gulp.src('app/assets/scss/**/*.scss')
.pipe(gulpIf(!argv.production, sourcemaps.init()))
.pipe(sass({
includePaths: bourbon,
includePaths: neat
}))
.pipe(csscomb(csscomb.json))
.pipe(autoprefixer({
browsers: ['last 3 versions'],
cascade: false
}))
.pipe(gulpIf(argv.production, rename({suffix:'.min'})))
.pipe(gulpIf(argv.production, cssnano()))
.pipe(gulpIf(argv.production, sizereport({
gzip: true
})))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browserSync.reload({stream:true}));
});
/*--- HTML ---*/
gulp.task('html', function () {
return gulp.src('app/*.html')
.pipe(gulpIf(argv.production, htmlreplace({
'css': './assets/css/app.min.css',
'js': './assets/js/main.min.js'
})))
.pipe(gulpIf(argv.production, htmlmin({collapseWhitespace: true})))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
stream: true
}));
});
/* --- Watch Task ---*/
gulp.task ('watch', function(){
gulp.watch('app/assets/scss/**/*.scss', ['styles']);
gulp.watch('app/*.html', ['html']);
gulp.watch('app/assets/img/*', ['images']);
gulp.watch('app/assets/js/**/*.js', ['webpack']);
});
/* --- IMAGE TASKS ---*/
gulp.task('images', function() {
return gulp.src('app/assets/img/**/*.+(png|jpg|jpeg|gif|svg)')
.pipe(cache(imagemin({
interlaced: true,
progressive: true
})))
.pipe(gulp.dest('./dist/assets/img'))
});
/* --- Font Tasks --- */
gulp.task('fonts', function () {
return gulp.src('app/assets/fonts/**/*')
.pipe(gulp.dest('dist/assets/fonts'))
.pipe(browserSync.reload({
stream: true
}));
});
/*---- CLEAN TASKS ---*/
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
});
gulp.task('clean:dist', function () {
return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});
/*--- BUILD TASKS ---*/
gulp.task('default', function(cb) {
runSequence('clean:dist',
['styles', 'html', 'images', 'fonts', 'webpack', 'browserSync', 'watch'], cb )
});
网络包
module.exports = {
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
}
]
},
output: {
filename: "main.js"
}
};
最佳答案
我不知道当你可以使用 webpack 时为什么要使用 gulp。我想你说的是react-hot-loader .
关于javascript - 为什么需要重新加载页面才能在运行服务器时显示脚本？ (Gulp/Webpack/React)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41755941/