标签: gulp-concat

我如何告诉Gulp跳过或忽略某些文件gulp.src([...])？例如,我不想在我的css /文件夹中压缩和连接这个文件 - 'css/ignnore.css'？

var autoprefix = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    minifyCss = require('gulp-minify-css');

gulp.task('styles', function() {
  gulp.src([
      'css/ignnore.css', // ignore this file
      'css/*.css'
    ])
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCss())
    .pipe(gulp.dest('local/view/style/base/css/dist/'));
});

我正在使用gulp uglify并准备好我的javascript文件进行制作.我所拥有的是这段代码:

var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var gzip = require('gulp-gzip');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');

var js = {
    src: [
        // more files here
        'temp/js/app/appConfig.js',
        'temp/js/app/appConstant.js',
        // more files here
    ],

gulp.task('scripts', ['clean-js'], function () {
    return gulp.src(js.src).pipe(uglify())
      .pipe(concat('js.min.js'))
      .pipe(gulp.dest('content/bundles/'))
      .pipe(gzip(gzip_options))
      .pipe(gulp.dest('content/bundles/'));
});

我需要做的是替换字符串:

dataServer: "http://localhost:3048",

同

dataServer: "http://example.com",

在'temp/js/app/appConstant.js'文件中,

我正在寻找一些建议.例如,也许我应该复制appConstant.js文件,更改(不确定如何)并在js.src中包含appConstantEdited.js？

但我不确定如何制作文件的副本并替换文件中的字符串.

你给予的任何帮助将不胜感激.

我想把sass输出并连接到另一个css常规文件.

例:

animate.css
app.scss

return gulp.src('app.scss')
    .pipe(sass({
        errLogToConsole: true
    }))
    .pipe(concat(['animate.css', OUTPUT_OF_THE_SASS_ABOVE]))
    .pipe(gulp.dest(paths.public+'css/'))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('css/'))
    .on('end', done);

任何想法怎么做？

*******IDEA

也许是可以从sass生成css文件到临时位置,然后用css文件连接它们,然后简单地删除它.任何想法如何做,在一个单一的任务？

我正在从Gulp 3升级到4,我遇到了一个错误:

The following tasks did not complete: build
Did you forget to signal async completion?

我明白它在说什么,但无法理解为什么这段代码会触发它.

错误与否,任务完成(文件连接并写入dest).在没有lazypipe的情况下执行相同的代码不会导致错误,并且删除lazypipe中的串联也可以修复错误.

将整个事物包装在创建流的东西(如合并流)中可以解决问题.我想有关gulp-concat和lazypipe之间的交互的一些事情是阻止正确返回流.

这是(简化)任务:

gulp.task('build', function() {
    var dest = 'build';

    var buildFiles = lazypipe()
        .pipe(plugins.concat, 'cat.js') // Task will complete if I remove this
        .pipe(gulp.dest, dest);

    // This works
    // return gulp.src(src('js/**/*.js'))
    //     .pipe(plugins.concat('cat.js'))
    //     .pipe(gulp.dest(dest));

    // This doesn't (unless you wrap it in a stream-making function)
    return gulp.src(src('js/**/*.js'))
        .pipe(buildFiles());
});

任何建议赞赏!

我有一个对象数组,如下所示.

var bundles = [
  {
    src: 'js/my-component/*.js',
    bundleName: 'my-component.js'
  },
  {
    src: 'js/my-other-component/*.js',
    bundleName: 'my-other-component.js'
  }
]

我希望gulp任务处理/连接数组中的每个条目,但它似乎不起作用.

gulp.task('bundlejs', function(){
    return bundles.forEach(function(obj){
      return gulp.src(obj.src)
      .pipe(concat(obj.bundleName))
      .pipe(gulp.dest('js/_bundles'))
    });
});

在我当前的工作流程中,我需要创建browserify包,但也希望将非commonjs js库连接到文件的开头以公开全局变量,同时还减少http请求的数量和js文件的大小.(其他捆绑包也可能需要其中一些库)

我目前有一个gulp任务,创建browserify包并将任何所需的libs连接到输出文件的开头,但是我发现在合并流时,我的源图是破坏的,并且在Web检查器中; 生成的映射仅显示预先uglified browserify包,而不是单独的js模块.

var gulp          = require("gulp"),
buffer            = require('vinyl-buffer'),
gulpif            = require("gulp-if"),
sourcemaps        = require("gulp-sourcemaps"),
merge             = require('merge-stream'),
concat            = require('gulp-concat'),
uglify            = require("gulp-uglify")
livereload        = require("gulp-livereload");

// compile scripts
gulp.task("scripts", function() {
  "use strict";

  // Iterate over bundles
  var tasks = config.browserifyBundles.map(function(item){

    // Use entry file for output file name
    var outputName = item.mainfile.replace(/^.*[\\\/]/, ''); 
    var browserifyStream = browserify({
      entries: item.mainfile,
      debug: env !== "production"
    }).bundle()
    .on("error", notify.onError())
    .pipe(source(outputName))
    .pipe(buffer())
    .pipe(gulpif(env !== "production", sourcemaps.init()))
    .pipe(gulpif(env !== …

我想知道是否有办法将这两个单独的任务合二为一.

此concat-js任务需要在运行之前存在生成的文件.该任务cache-angular-templates生成该文件.生成的文件需要包含在concat输出中.完成后concat-js,可以删除文件 - 不再需要它.

这似乎是我应该以某种方式能够管中使用的流cache-angular-tempaltes进流concat-js用途.

gulp.task('concat-js', ['cache-angular-templates'], function () {
    var concatOutputPath = path.dirname(paths.compiledScriptsFile),
        concatOutputFileName = path.basename(paths.compiledScriptsFile),
        jsFiles = [].concat(
            paths.libScripts,
            paths.appScripts,
            paths.templateScriptFile,
            notpath(paths.compiledScriptsFile),
            notpath(paths.specMockScripts),
            notpath(paths.specScripts)
        );

    return gulp
        .src(jsFiles)
        .pipe(buildTools.concat(concatOutputFileName))
        .pipe(gulp.dest(concatOutputPath))
        .on('end', function () {
            del(paths.templateScriptFile);
        })
    ;
});

gulp.task('cache-angular-templates', function () {
    var cacheOutputPath = path.dirname(paths.templateScriptFile),
        cacheOutputFileName = path.basename(paths.templateScriptFile);

    var options = {
        root: '/' + cacheOutputPath,
        standalone: true,
        filename: cacheOutputFileName
    };

    return gulp
        .src(paths.templates)
        .pipe(buildTools.angularTemplatecache(options)) …

Gulp新手在这里,我在下载*.js时下载gulp -order来订购js文件, 因为我的一些javascript文件需要首先加载jquery.

下面是我的gulpfile.js,它有order,concat,rename和uglify.

var date = new Date();
var uniq = date.getTime();

gulp.task('admin-scripts', function() {
    return gulp.src(['assets/admin/js/*.js','!assets/admin/js/respond.min.js','!assets/admin/js/html5shiv.js'])
        .pipe(order([
            "assets/admin/js/jquery.min.js",
            'assets/admin/js/*.js'
        ]))
        .pipe(concat(uniq+'admin.js'))
        .pipe(gulp.dest('build/assets/admin/js/'))
        .pipe(rename(uniq+'admin.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/assets/admin/js/'));
});

但似乎订购无效.

排序基于字母a.js> z.js而不是jquery.min.js> a.js> z.js

我在gulpfile.js上有什么错误的代码吗？

我正在为我的应用程序创建3个缩小的包.我有两个任务要做,缩小和捆绑.Minify依赖于bundle.如果我运行minify,两个任务都会运行而没有错误.捆绑包已创建,但缩小的文件不是.如果我删除对bundle的依赖,那么我可以自己运行minify并成功创建缩小的文件.这让我相信当minify任务触发时可能正在使用文件(因为bundle还没有完成？).如何使其等待文件完全准备好？我可以通过这条小溪吗？或者将这些组合成一个任务？它们目前不是单个任务的原因是因为它们每个捆绑包输出2个文件(一个未分类和缩小的捆绑包).

var outFolder = __dirname + '\\Scripts\\dist';
var appBundles = [
    { scripts: ['Scripts/Common/**/*.js'], output: 'eStore.common.js' },
    { scripts: ['Scripts/Checkout/**/*.js'], output: 'eStore.checkout.js' },
    { scripts: ['Scripts/ProductDetail/**/*.js'], output: 'eStore.product.js' }
];

gulp.task('bundle', bundle);
gulp.task('minify', ['bundle'], minify);  // this one doesn't work
gulp.task('minifyOnly', minify);          // this one works

function bundle() {
    appBundles.forEach(function (appBundle) {
        gulp.src(appBundle.scripts)
            .pipe(concat(appBundle.output))
            .pipe(sourcemaps.init())
            .pipe(sourcemaps.write(outFolder + '\\maps'))
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

function minify() {
    appBundles.forEach(function(appBundle) {
        var bundleSrc = outFolder + '\\' + appBundle.output;
        gulp.src(bundleSrc)
            .pipe(rename({ extname: '.min.js' …

我知道这可能是一个奇怪的问题,但坚持我.:)

是否有可能使用一口青菜(或其他一饮而尽插件)来读取多个@import声明,和一个.scss文件导入/ Concat的所有@进口的文件以单一.scss文件是未编译为CSS？

背景信息:我已经使用了Bootstrap和FontAwesome基本.scss文件,并将它们组合成一个主.scss文件.我现在想要将@import语句中的所有文件都放到一个.scss文件中.

我想到的另一个选择是使用concat工具,但是我不必手动指定要在gulp文件中连接的每个文件吗？如果我错了,请纠正我.

我正在寻找的例子:

//base.scss
@import foo;
@import bar;

进口

//foo.scss
$my-font-size:20px;

和

//bar.scss
body {
  div {
    font-size:$my-font-size;
  }
}

要做

//final.scss
$my-font-size:20px;
body {
  div {
    font-size:$my-font-size;
  }
}

请注意,@imports包含在final.scss文件中,但没有来自SCSS - > CSS的任何编译.