标签: gulp-sourcemaps

有人可以解释如何uglify,然后concat并最终使用gulp生成源地图？我似乎无法让它工作.我没有在API中看到任何关于此的内容,但在我看来它应该得到支持.关键是生成源映射并在设置断点时使用源文件.我已经尝试将第concat一个放在下面的代码中,但是当我这样做时,断点在chrome浏览器中不起作用.

我正在使用
concat = require('gulp-concat'),和uglify = require('gulp-uglify').

gulp.src(['src/app.js', 'src/**/*.js'])
    .pipe(sourcemaps.init())
    .pipe(uglify({
        compress: {
            negate_iife: false
        }
    }))
    .pipe(concat("app.concat.js"))
    .pipe(rename('app.min.js'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('public/js'));

我目前正在编写一个侧面项目,我可以在其中了解有关TypeScript和ES6(使用babel)的更多信息.

我想在我的TypeScript中使用ES6,所以我选择了以下工作流程.

Typescript (ES6) -> Babel (ES6) -> ES5

现在我正在使用Gulp来自动化所有这些,并且我很难让源图正确生成.我应该提一下,用户在/ r/typescript上向我建议了这种风格,所以我甚至不确定它是否可行.

无论如何,这是我当前的gulp任务

var server = $.typescript.createProject('src/server/tsconfig.json');
gulp.task('build', ['vet'], function () {
  var sourceRoot = path.join(__dirname, 'src/server/**/*.ts');
  return gulp.src('src/server/**/*.ts')
    .pipe($.sourcemaps.init())
      .pipe($.typescript(server))
      .pipe($.babel())
    .pipe($.sourcemaps.write('.', { sourceRoot: sourceRoot}))
    .pipe(gulp.dest('build/server'));
});

我尝试了很多不同的方法,但都没有.在VSCode中调试时,我的app的入口点:正确build/server/index.js加载并找到源文件src/server/index.ts.

然而,当VSCode试图步入另一个文件中说,build/server/utils/logger/index.js它看起来src/server/utils/logger/index.js它没有找到,因为它应该寻找一个*的.ts文件.

那么我做错了什么？或者这甚至可能吗？我现在已经盯着这个约5个小时了.所以任何见解都会很棒.

另外VSCode 0.9.x显示'.../.js' file not found和VSCode 1.0只是静默失败.

我的tsconfig.json,它被传入 $.typescript.createProject()

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "target": "ES6",
    "sourceMap": true,
    "outDir": "build/server"
  }
}

.babelrc

{
  "presets": …

我试图将我的所有样式(css,scss)文件合并到一个文件中并进行编译.原因是因为存在基于另一个文件中的变量的文件,但现在我无法创建源图.

我究竟做错了什么？有更好的解决方案吗？

const gulp = require('gulp');
const debug = require('gulp-debug');
const sass = require('gulp-sass');
const concat = require('gulp-concat');  
const uglify = require('gulp-uglify');  
const csso = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');
const addsrc = require('gulp-add-src');
const sourcemaps = require('gulp-sourcemaps');
const ngmin = require('gulp-ngmin');
const browserSync = require('browser-sync');

gulp.task('default', ['browser-sync'], function(){
    gulp.watch('app/**/*.scss', ['styles']);
    gulp.watch('app/**/*.js', ['app-scripts']);
    gulp.watch('app/components/**/*.html', ['components-html']);
    gulp.watch('app/views/**/*.html', ['view-html']);
    gulp.watch('app/index.html', ['copy-index-html']);
    gulp.watch('app/json/**/*.json', ['copy-jsons']);
});

gulp.task('styles', () => 
    gulp.src([
        'app/style/vendors/*.css',
        'app/style/utils/*.scss',
        'app/style/base/*.scss',
        'app/style/layout/*.scss',
        'app/components/**/*.scss',
        'app/views/**/*.scss'
    ])
    .pipe(concat('styles.scss'))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('dist/style'))
); …

我正在尝试执行以下操作:

1. 合并所有CSS文件(jQuery插件)
2. 结合媒体查询
3. 缩小CSS
4. 写源图

之后我尝试在另一个文件夹中做其他事情

1. 翻译少
2. 结合媒体查询
3. 缩小生成的CSS
4. 写源图
5. Autoprefix的东西

看起来像这样:

gulp.task('styles', function() {
  var streamCSS = gulp.src(sources.css)
    .pipe(sourcemaps.init())
    .pipe(concat('vendor.css'))
    .pipe(cmq())
    .pipe(minify({ keepSpecialComments: '*' }))
    .pipe(sourcemaps.write());

  var streamLESS = gulp.src(sources.less)
    .pipe(plumber({ errorHandler: errorHandler }))
    .pipe(sourcemaps.init())
    .pipe(less())
    .on('error', swallowError)
    .pipe(cmq())
    .pipe(minify({ keepSpecialComments: '*' }))
    .pipe(sourcemaps.write())
    .pipe(prefix("last 2 versions", "> 1%", "ios >= 6", { map: true }))
    .on('error', swallowError);

  return es.merge(streamCSS, streamLESS)
    .pipe(plumber({ errorHandler: errorHandler }))
    .pipe(concat('main.css'))
    .pipe(gulp.dest(destinations.css))
    .pipe(connect.reload());
});

我遇到的唯一问题是生成的源映射是错误的,并且始终引用错误的LESS文件.

我使用以下库来实现此目的:

• 一饮而尽,CONCAT
• 吞掉少
• 一饮而尽,autoprefixer
• 吞掉,结合媒体查询
• 一饮而尽,sourcemaps
• 一饮而尽,缩小,CSS

我知道如果我省略供应商的东西它会起作用,但我想只有一个结果样式表.

感谢您的一切建议!

我/ less文件夹中有两个LESS文件:

main.less:

@import 'vars';

body{
  background-color: @blau;
}

和vars.less

@blau : #6621ab;

我的gulp任务使用gulp-less和gulp-sourcemaps

gulp.task('less', function () {
  gulp.src('./less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/'))
});

CSS生成(在/public/main.css)工作正常,但在源图中,我只能看到main.less,而不是vars.less.任何的想法？提前致谢

我正在使用gulp来构建项目,以及用于生成源映射的gulp-sourcemaps.

我有几个像这样的组件:

public
 |-- src
      |-- comp1
      |     |-- c1-a.js
      |     |-- c1-b.js
      |
      |-- comp2
            |-- c2-a.js
            |-- c2-b.js

我想把它们构建成以下结构:

public
 |-- dist
 |    |-- comp1
 |    |     |-- c1-a.min.js
 |    |     |-- c1-a.min.js.map
 |    |     |-- c1-b.min.js
 |    |     |-- c1-b.min.js.map
 |    |
 |    |-- comp2
 |          |-- c2-a.min.js
 |          |-- c2-a.min.js.map
 |          |-- c2-b.min.js
 |          |-- c2-a.min.js.map
 |
 |-- src/

目前我的gulp任务可以将文件生成到正确的路径:

gulp.task('component', function() {
  gulp.src('./public/src/**/*.js', {base: './public/src'})
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: '/src/' …

我npm update今天跑了,接着是灾难.我无法安装软件包,但是在所有内容出现在正确的位置之后,我启动了gulp将我的SCSS代码编译成CSS的任务.

此代码重现了我的问题:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('www/sass/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('www/css'));
});

gulp.task('default', ['sass'], function(){
    gulp.watch('www/sass/*.scss', {debounceDelay: 2000}, ['sass']);
});

运行这段代码后gulp default,结果如下:

WWW/SASS/example.scss

#test {
    color: red;
}

WWW/CSS/example.css

#test {
  color: red; }

/*# sourceMappingURL=example.css.map */

WWW/CSS/example.css.map

{"version":3,"sources":["../../stdin"],"names":[],"mappings":"AAAA,KAAK,CAAC;EACL,KAAK,EAAE,GAAI,GACX","file":"example.css","sourceRoot":"/sass"}

sources生成的源映射中的数组包含"../../stdin/"而不是"example.scss"!但为什么？

我在生产和开发服务器上使用源映射的js文件,所以我只是从本地存储加载它.在这种情况下,我在文件末尾使用下一个字符串//#sourceMappingURL = file://// var/www/static /.哪些指向我当地的商店.但是我想在操作系统Linux和Windows上使用它.所以对于Windows,这个字符串是无效的文件://// var/www/static /,我应该使用file://// C:/ www/static /.在这种情况下,Linux浏览器可以获取此文件.是否有可能使用一些适用于两种操作系统的通用引用

我有以下用于捆绑 javascript 的 gulp 任务：

gulp.task('js', function () {
    return gulp.src(paths.js)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(concat('bundle.min.js'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

当我在 Chrome 开发工具中运行它时，找到了源映射并且断点起作用，但无法调试变量。

以这个角度代码块为例：

iarApp.config(['$animateProvider', function ($animateProvider) {
    $animateProvider.classNameFilter(/angular-animate/);
}]);

如果我添加一个断点来查看 的值$animateProvider，我会得到以下信息：

但是如果我在 Uglify 中关闭变量重整：

.pipe(uglify({ mangle: false }))

然后它的工作原理：

所以看起来 gulp-sourcemaps 插件在 Uglify 破坏名称后无法跟踪变量。

其他人能遇到同样的问题和/或知道解决方案吗？

我一直在使用一个 gulpfile，我现在已经修改它以尝试将源映射添加到我编译的 css 和缩小的 css 文件中。

我在文件中有以下任务：

gulp.task('sass', function () {
return gulp.src('./src/sass/zebra.scss')

    .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: autoprefixrBrowsers,
            cascade: false
        }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(destination))
    .pipe(cssnano())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest(destination));
});

但是，在尝试编译时，出现以下错误：

stream.js:74
  throw er; // Unhandled stream error in pipe.