标签: gulp-concat

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

是否有可能使用一口青菜(或其他一饮而尽插件)来读取多个@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的任何编译.

我正在尝试连接我的JS文件并通过Babel为新项目运行它们,但是我的gulpfile不会在每次任务运行时覆盖目标文件,只会将更改附加到文件中.所以我的目标文件最终看起来像这样:

console.log('hello');

//# sourceMappingURL=app.js.map
console.log('goodbye');

//# sourceMappingURL=app.js.map

我错过了什么？下面是我的gulpfile.

提前致谢.

var gulp        = require('gulp');
var sourcemaps  = require("gulp-sourcemaps");
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var concat      = require('gulp-concat');
var babel       = require('gulp-babel');    
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

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

gulp.task('js-reload', ['js'], reload);

gulp.task('serve', ['js'], function() {
    browserSync.init({
        server: "./app"
    });
    gulp.watch("./app/js/*.js").on('change', ['js-reload']);
    gulp.watch("./app/*.html").on('change', reload);
});

gulp.task('default', ['js', 'serve']);

尝试在最近几个小时angular内使用concat/uglify我的应用程序gulp,我已经将整个过程简化为简单的concat,甚至将concat进程中的角度文件移除到<script>标题中的单独请求 - 但仍然,我收到相同的错误:

未捕获的TypeError:angular.module(...).factory(...)不是函数

没有concat一切都很好.

我的任务:

gulp.task('JS', function() {
  gulp.src(['!_dependencies/angular.min.js', '_dependencies/jquery.min.js', '_dependencies/moment.min.js', 'Alpha/_lilhelpers.js', 'Alpha/routes.js' , '!trainerreg.js', '**/*.js'], {cwd: './public/scripts'})         
    .pipe(concat('concat.js'))    
    .pipe(gulp.dest('./public/min'));
});

看起来Error basicaly会.factory在代码中出现.

这是它目前因错误而停止的行 - 它是一个缩小的代码,但我不是迷你它,我现在只是简化文件,包括angular-animate.min这行代码(实际上是第一个).
如果我删除angular-animate它只会在另一个将要在路上的工厂抛出错误.

(function(N,f,W){'use strict';f.module("ngAnimate",["ng"]).directive("ngAnimateChildren",function(){return function(X,r,g){g=g.ngAnimateChildren;f.isString(g)&&0===g.length?r.data("$$ngAnimateChildren",!0):X.$watch(g,function(f){r.data("$$ngAnimateChildren",!!f)})}}).factory("$$animateReflow",["$$rAF","$document",function(f,r){var g=r[0].body;return function(r){return f(function(){r(g.offsetWidth)})}}]).config...

更新:哦,我错了,一旦遇到它就不会破坏; 它一旦遇到.factory就会在仲裁文件的缩小部分中断...

很高兴听到任何解决方案/假设!

我在我的gulpfile.js中对此进行了分析:

gulp.task('buildStyles', function() { 
  return gulp.src([
    './styles/less/main.less',
    './styles/less/widgets/widgets.less',
    './styles/less/pages/pages.less',
    './styles/less/themes/default.less',
    './styles/less/rtl/rtl.less'
  ])
  .pipe(plumber())
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(concat('allmin.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./dest'));
});

但我总是收到如下消息:

$ gulp buildStyles
[18:46:31] Using gulpfile /Library/WebServer/Documents/qjt2015/trunk/gulpfile.js
[18:46:31] Starting 'buildStyles'...
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/support-tickets.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/comments.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/article-comments.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/threads.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/chat.less

我在所有较少的文件中使用@imports,而引用是那些在消息中看不到的引用.例如,我的widgets.less文件如下:

// ### Bootstrap's variables andmixins
@import "../../../bower_components/bootstrap/less/variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";
@import '../variables.less';
@import '../mixins.less';

@import './support-tickets.less';
@import './comments.less';
@import './article-comments.less';
@import './threads.less';
@import './chat.less';

我错过了什么吗？提前,谢谢你的帮助!

我有一个相当标准的用例 gulp-sourcemaps

https://github.com/floridoo/gulp-sourcemaps

  gulp.src( bundle.src)
           .pipe(sourcemaps.init())
           .pipe(concat(bundle.dst + '.' + opts.ext))
            .pipe(uglify())
            .pipe(sourcemaps.write())
            .pipe(gulp.dest('./public/built'));

这将生成适当级联和丑陋的文件。但是，没有源映射添加到它们。bundle.src是文件路径的数组。不知道如何调试它。

我正在尝试将旧的gulpjs文件转换为es6，但是我在concat任务中始终收到此错误消息：

Error: Recived a non-Vinyl object in dest()

我的gulpfile.js：

import gulp from 'gulp';

/*********** Jade and Pug templating ***********/
import jade from 'gulp-jade';
import pug from 'gulp-pug';

/*********** SASS and SCSS compiling ***********/
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import cleanCss from 'gulp-clean-css';

/*********** JS concat and minify ***********/
import concat from 'gulp-concat';
import minify from 'gulp-minify';

/*********** Static server ***********/
import bs from 'browser-sync';

const dirs = {
    pug_src: 'views',
    sass_src: 'assets/scss',
    js_src: …

您好我有以下gulpfile.js:

'use strict';

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    sass = require('gulp-ruby-sass'),
    compass = require('gulp-compass'),
    gutil = require('gulp-util'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    templateCache = require('gulp-angular-templatecache'),
    path = require('path');

/* Default Gulp Task */
gulp.task('default', ['sass', 'mfb-sass', 'bower-css', 'bower-js', 'app-js', 'ng-templates'], function () {
    return gutil.log('Gulp is running!')
});

/* Build SASS files */
gulp.task('sass', function () {
    return gulp.src('./src/sass/*.scss')
        .pipe(sourcemaps.init())
        .pipe(compass({
            project: path.join(__dirname, '/'),
            css: 'dist/css',
            sass: 'src/sass'
        })) …

我试图运行咕嘟咕嘟来缩小CSS,JS,并将所有静态的东西(template,font,img)到build文件夹中.

我的项目目录结构:

- project
|- gulpfile.js
|- package.json
|- src
||- font
||- img
||- js
||- sass
||- template
|- build
||- css
||- font
||- img
||- js
||- template

我的gulpfile.js:

var PATH = {
    SRC: {
        SASS: 'src/sass/',
        JS: 'src/js/',
        TEMPLATE: 'src/template/',
    },
    DEST: {
        CSS: 'build/css/',
        JS: 'build/js/',
        TEMPLATE: 'build/template/',
    }
};


var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    minifyCss = require('gulp-minify-css'),
    rename …

我想用gulp连接和uglify我的JS文件.之后我想用一个包含jquery,bootstrap,...的供应商文件夹来结果.

在uglify我的js代码之后,如何从vendor文件夹中连接文件？

这是我目前的gulp文件:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  gulp.src([
          './src/resources/assets/js/**/*.js',
          '!./src/resources/assets/js/vendor/**/*.js'
      ])
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./public/js/'));
});

gulp.task('default', ['scripts'], function() {
});

我想合并我的文件并将其写到单个文件中，然后我想删除原始文件。我应该如何在默认任务中解决此问题？

var es = require('event-stream');
var concat = require('gulp-concat');
var unique = require('array-unique');

function concatGroup(groupName, group){

    return gulp.src(unique(group.files))
        .pipe(concat(groupName + '.js'))
        .pipe(gulp.dest(group.target));
}

gulp.task('default', function () {
    var groups = {
        test: {
            files: [array of files],
            target: "target dir"
        },
        test2: {
            files: [array of files],
            target: "target dir"
        },
        test3: {
            files: [array of files],
            target: "target dir"
        }
    };

    var streams = [];
    for (var groupName in groups) {
        streams.push(concatGroup(groupName, groups[groupName]));
    }
    return es.concat.apply(es, streams);
});