使用 gulp 包含节点模块答案

【问题标题】：Using gulp to include node modules使用 gulp 包含节点模块
【发布时间】：2018-02-06 09:29:34
【问题描述】：

大多数 Gulp 教程遵循大致相同的模式：开发人员编写一个 gulp 文件，开发人员在这个 gulp 文件中导入一些插件-例如：js uglify- 并使用它来构建输出文件。

我的问题有点不同，虽然我知道这是基本问题，但我找不到解决方案。假设我编写了一个依赖 jQuery 工作的脚本“X”。我已经通过 NPM 安装了 jQuery，现在在运行 gulp 时如何包含它？现在我在 gulpfile 中列出了我需要的所有外部 JS 和 CSS，以及字体和图像，并使用 streamqueue 来合并所有内容。它有点工作，但感觉更像是一种解决方法，而不是实际的解决方案。有没有办法告诉 Gulp 自动包含任何依赖项，因为它们在 package.json 中列出？

提前感谢您的帮助

【问题讨论】：

标签： javascript gulp

【解决方案1】：

此示例配置用于开发 React 项目并使用 Gulp 任务运行器和 npm 包。

gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
// New Plugin
var notify = require('gulp-notify');
var util = require('gulp-util');
var watchify = require('watchify')
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');


gulp.task('browserify' , function(){
  return browserify('./scripts/main.js')
        .transform(babelify , {presets: ["es2015", "react"]})
        .bundle()
        .on('error' , function(e) {
          console.log(e.message);

          this.emit('end');
        })
        .pipe(source('bundle.js'))
        // .pipe(buffer())
        // .pipe(uglify())
        .pipe(gulp.dest('./build'));
});


gulp.task('watch' , ['browserify'],  function() {
  gulp.watch('./scripts/**/*/*.js' , ['browserify']);
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Project</title>
    <link rel="stylesheet" href="styles/antd.min.css">
    <link rel="stylesheet" href="styles/app.css">
  </head>
  <body>

    <div id="app">

    </div>

  <script src="build/bundle.js"></script>
  </body>
</html>

package.json

{
  "name": "reactproject",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "browser-sync": "^2.18.5",
    "browserify": "^13.1.1",
    "gulp": "^3.9.1",
    "gulp-notify": "^2.2.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.8.0"
  },
  "dependencies": {
    "antd": "^2.6.4",
    "axios": "^0.15.3",
    "react-cookie": "^1.0.4",
    "react-mixin": "^3.0.5",
    "react-router": "^3.0.2"
  },
  "description": ""
}

项目结构：

├── build
├── node_modules
├── scripts
├── styles
gulpfile.js
index.html
package.json
package-lock.json

【讨论】：