Question

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

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

中

提前感谢您提供任何帮助

Answer 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

使用gulp包含节点模块

1 个答案: