Question

我试图让webpackdevserver在gulp中实时更新：

gulp.task('watch', function() {
    gulp.watch(path.ALL, ['sass', 'webpack-dev-server', 'watch']);
});

这是我的webpack.config.js：

module.exports = {
    entry: "./app/app.js",
    output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/dist/",
        filename: "foss.js",
        sourceMapFilename: "foss.map"
    },
    devtool: '#source-map',
    module: {
        loaders: [{
            loader: 'babel',
            exclude: /node_modules/
        }]
    },
    devServer: { inline: true }

}

如何更改gulp或webpack以使其实时更新？

Answer 1

在项目目录中创建一个新文件 gulpfile.js 。

"use strict";

var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify');  // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
// var lint = require('gulp-eslint'); //Lint JS files, including JSX
var babelify = require('babelify'); // support for es6

var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
    html: './src/*.html',
    js: './src/**/*.js',
    images: './src/images/*',
    css: [
        'node_modules/bootstrap/dist/css/bootstrap.min.css',
        'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
                './src/css/*.css'
            ],
    dist: './dist',
    mainJs: './src/main.js'
}
}

//Start a local development server
gulp.task('connect', function() {
connect.server({
    root: ['dist'],
    port: config.port,
    base: config.devBaseUrl,
    livereload: true
});
});

gulp.task('open', ['connect'], function() { 
gulp.src('dist/index.html')
    .pipe(open('', { url: config.devBaseUrl + ':' + config.port + '/'}));
});

gulp.task('html', function() {
gulp.src(config.paths.html)
    .pipe(gulp.dest(config.paths.dist))
    .pipe(connect.reload());
});

gulp.task('js', function() {
browserify(config.paths.mainJs)

    .transform(reactify)
    .bundle()
    .on('error', console.error.bind(console))
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(config.paths.dist + '/scripts'))
    .pipe(connect.reload());
});

gulp.task('css', function() {
gulp.src(config.paths.css)
    .pipe(concat('bundle.css'))
    .pipe(gulp.dest(config.paths.dist + '/css'));
});

// Migrates images to dist folder
// Note that I could even optimize my images here
gulp.task('images', function () {
gulp.src(config.paths.images)
    .pipe(gulp.dest(config.paths.dist + '/images'))
    .pipe(connect.reload());

//publish favicon
gulp.src('./src/favicon.ico')
    .pipe(gulp.dest(config.paths.dist));
});

// gulp.task('lint', function() {
//  return gulp.src(config.paths.js)
//      .pipe(lint({config: 'eslint.config.json'}))
//      .pipe(lint.format());
// });

gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html']);
gulp.watch(config.paths.js, ['js']);
gulp.watch(config.paths.css, ['css']);
}); 

gulp.task('default', ['html', 'js', 'css', 'images', 'open', 'watch']);

使用此文件重新加载项目。如需更多信息，请查看此代表：https://github.com/tarangdave/react-starter

我怎样才能为webpackdevserver重新上传gulp？

1 个答案: