Gulp concat并要求路径

时间:2015-08-07 08:39:10

标签: javascript gulp gulp-concat

我有gulp-concat的问题。我试图将所有js文件连接到一个文件中,比方说,dist / app.js。

但有些事情我不明白。在该文件中,我所需的文件路径仍然与以前相同......

这是我的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"));
});

如您所见,我想连接嵌套文件夹。

查看我的/client/components/app.js顶部的示例:

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

//Code here

所以在我的应用程序app.js由gulp生成,我可以看到:

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

这是一条相对路径,无法运作。

那么,用相对路径处理这些所需文件的技巧是什么?

非常感谢。

编辑:看到我得到的错误:

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> (MyFolder\dist\js\app.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)

2 个答案:

答案 0 :(得分:3)

对任何可能遇到同样问题的人。 Babel目前不支持导入内联#1681,也不支持gulp-concat,因为它只是连接文件。

我选择使用Rollup来解决依赖关系,然后才转换输出:

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'));
});

答案 1 :(得分:0)

如果您想在一个文件中获取所有内容,则必须编写<div class="section-hi main-section"> <h2 class="main-section_header">Blah</h2> <h3 class="main-section_subHeader>Generated from the CMS</h3> <!-- This will work --> </div> ,其中 jsfile 是您文件的名称。