使用 gulp 包含节点模块

Dod*_*Dod 5 javascript gulp

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

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

预先感谢您的任何帮助

Sey*_*edi 0

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

\n

gulpfile.js

\n
var gulp = require('gulp');\nvar browserify = require('browserify');\nvar babelify = require('babelify');\nvar source = require('vinyl-source-stream');\n// New Plugin\nvar notify = require('gulp-notify');\nvar util = require('gulp-util');\nvar watchify = require('watchify')\nvar buffer = require('vinyl-buffer');\nvar uglify = require('gulp-uglify');\n\n\ngulp.task('browserify' , function(){\n  return browserify('./scripts/main.js')\n        .transform(babelify , {presets: ["es2015", "react"]})\n        .bundle()\n        .on('error' , function(e) {\n          console.log(e.message);\n\n          this.emit('end');\n        })\n        .pipe(source('bundle.js'))\n        // .pipe(buffer())\n        // .pipe(uglify())\n        .pipe(gulp.dest('./build'));\n});\n\n\ngulp.task('watch' , ['browserify'],  function() {\n  gulp.watch('./scripts/**/*/*.js' , ['browserify']);\n});\n
Run Code Online (Sandbox Code Playgroud)\n

索引.html

\n
<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <title>React Project</title>\n    <link rel="stylesheet" href="styles/antd.min.css">\n    <link rel="stylesheet" href="styles/app.css">\n  </head>\n  <body>\n\n    <div id="app">\n\n    </div>\n\n  <script src="build/bundle.js"></script>\n  </body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n

包.json

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

项目结构:

\n
\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 build\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 scripts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles\ngulpfile.js\nindex.html\npackage.json\npackage-lock.json\n
Run Code Online (Sandbox Code Playgroud)\n