大多数 Gulp 教程大致遵循相同的模式:开发人员编写一个 gulp 文件,在这个 gulp 文件中,开发人员导入一些插件 - 例如:js uglify - 并使用它来构建输出文件。
我的问题有点不同,虽然我知道这是基本的,但我找不到解决方案。假设我编写了一个依赖 jQuery 工作的脚本“X”。我已经通过 NPM 安装了 jQuery,现在运行 gulp 时如何包含它?现在,我在 gulpfile 中列出了所有外部 JS - 和 CSS、字体和图像 - 我需要并使用 Streamqueue 来合并所有内容。它确实有效,但感觉更像是一种解决方法,而不是实际的解决方案。有没有办法告诉 Gulp 自动包含任何依赖项,因为它们在 package.json 中列出?
预先感谢您的任何帮助
此示例配置为开发 React 项目并使用 Gulp 任务运行程序和 npm 包。
\ngulpfile.js
\nvar 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});\nRun 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>\nRun 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}\nRun 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\nRun Code Online (Sandbox Code Playgroud)\n