問題描述

我對(duì) gulp-concat 有疑問.我正在嘗試將我的所有 js 文件連接到一個(gè)文件中，比如說 dist/app.js.

I have a problem with gulp-concat. I'm trying to concate all my js files in a single file, let's say, dist/app.js.

但是有些東西我不明白.在那個(gè)文件中，我需要的文件路徑仍然和以前一樣......

But there is something that I don't understand. In that file, my required files path are still the same than before...

這是我的 gulpfile.js :

Here is my gulpfile.js :

var gulp       = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel      = require("gulp-babel");
var concat     = require("gulp-concat");
var resolveDependencies      = require("gulp-resolve-dependencies");

gulp.task("default", function () {
  return gulp.src("client/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("app.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/js"));
});

如您所見，我想連接嵌套文件夾.

As you can see, I want to concat nested folders.

以我的/client/components/app.js 頂部為例:

Take a look for example at the top of my /client/components/app.js :

import React, {PropTypes} from 'react';
import AppLeftNav from './AppLeftNav';
import {AppCanvas, AppBar, Styles} from 'material-ui';

//Code here

所以在我由 gulp 生成的 app.js 中，我可以看到:

So in my app app.js generated by gulp, i can see :

var _AppLeftNav = require('./AppLeftNav');

是相對(duì)路徑，不能用.

那么，用相對(duì)路徑處理這些所需文件的技巧是什么?

So, what's the tricks to handle theses required files with relative path ?

非常感謝.

查看我得到的錯(cuò)誤:

Error: Cannot find module './components/App.js'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (MyFolderdistjsapp.js:34:24)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

推薦答案

致任何可能有同樣問題的人.Babel 目前不支持內(nèi)聯(lián)導(dǎo)入 #1681，gulp-concat 也不支持，因?yàn)樗侵皇沁B接文件.

To anyone who might have the same problem. Babel currently doesn't support imports inlining #1681, neither do gulp-concat, as it's just concatenating files.

我選擇使用 Rollup 來正確解決依賴關(guān)系，然后才轉(zhuǎn)譯輸出:

I opted to use Rollup to propertly resolve dependencies and only then transpile output:

var gulp = require('gulp');
var gutil = require('gulp-util');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var rollup = require('gulp-rollup');

gulp.task('build', function () {
  return gulp.src('src/parser-factory.js', { read: false })
    .pipe(rollup({ external: ['request', 'cheerio'] }))
    .on('error', gutil.log)
    .pipe(babel({ stage: 0 }))
    .pipe(concat('realty-parser.js'))
    .pipe(gulp.dest('lib'));
});

這篇關(guān)于Gulp concat 和需要路徑的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！