关于node.js：需要帮助了解gulp和webpack-stream的工作方式


Need help understanding how gulp and webpack-stream works

所以我有一个Gulp文件(正在工作)和一个Webpack文件(正在工作)。 现在，我想将它们结合在一起，这样我只需要运行webpack即可观察和编译SCSS文件。

在webpack主页上，我可以使用webpack-stream

1
2
3
4
5
6
7
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

我不明白我在这里读什么。 而且我不熟悉管道。
-第一部分代码，这是否进入gulpfile.js？
-什么是entry.js？
-这段代码做什么？

The above will compile src/entry.js into assets with webpack into
dist/ with the output filename of [hash].js (webpack generated hash of
the build).

Or just pass in your webpack.config.js:

1
2
3
return gulp.src('src/entry.js')
  .pipe(webpack( require('./webpack.config.js') ))
  .pipe(gulp.dest('dist/'));

我猜这进入了我的gulpfile.js吗？

我想我需要用茶匙把它递给我：-/

更新资料

我得到了@kannix和@JMM的帮助。 这是我的配置文件：

古尔普

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var gulp = require('gulp');
var sass = require('gulp-sass');
var webpack = require('webpack-stream');

gulp.task('default', [
    'webpacker',
    'sass',
    'watch'
]);

gulp.task('webpacker', function() {
    return gulp.src('./src/index.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest('dist/'));
});


gulp.task('sass', function () {
    return gulp
        .src('./src/sass/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css/'));
});

gulp.task('watch', function() {
        gulp.watch('./src/sass/*.scss', ['sass']);
        gulp.watch('./src/components/*.jsx', ['webpacker']);
});

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry:"./src/index.js",
    output: {
        path: __dirname +"/js/",
        filename:"bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

  • 是的，该代码是为gulpfile设计的。

  • What is entry.js?

    通常，当与Webpack之类的东西捆绑在一起时，您将拥有一个运行应用程序的脚本，并且是依赖关系图的入口。 这就是entry.js所指的。

  • What does this piece of code do?

    这是一个评论版本：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var gulp = require('gulp');
    var webpack = require('webpack-stream');
    gulp.task('default', function() {
      // Read `src/entry.js` in as a vinyl file
      return gulp.src('src/entry.js')
        // Send `entry.js` to this `webpack-stream` module.
        .pipe(webpack())
        // Send the output of `webpack-stream` to `dist/`
        .pipe(gulp.dest('dist/'));
    });
    • 1
    2
    3
    4
    5
    gulp.task('default', function() {
      return gulp.src('src/entry.js')
        .pipe(webpack())
        .pipe(gulp.dest('dist/'));
    });

    是的，这是来自gulpfile.js的代码。
    这告诉gulp读取src/entry.js并将文件内容流式传输到webpack-stream gulp插件。 然后将webpack-stream的输出写入dist/

    entry.js是webpack入口点

    第二个示例几乎相同，但是大多数likley都会从webpack.config.js中读取其他webpack配置

    相关讨论