标签: gulp-sourcemaps

今天我了解到可以将源映射直接包含在缩小的JavaScript文件中,而不是将它们放在单独的example.min.map文件中.我想知道:为什么有人想做那样的事情？

拥有源映射的好处对我来说很清楚:例如,可以在运行缩小的文件时使用原始的非压缩源文件调试错误.最小化的好处也很明显:源文件的大小大大减少,使浏览器下载速度更快.

那么为什么在地球上我会想要将源地图包含在缩小的文件中,因为地图的大小甚至比缩小的代码本身还要大？

我正在使用gulp.

我想有一个或多个JS文件(比如说jQuery)将它们组合在一起,缩小它,然后将它写入分发文件夹.

我是这样做的:

minifyJS(['/js/myModule.file1.js',
          '/js/myModule.file2.js'], '/dist/js', 'myModule')

功能:

function minifyJS(sourceFiles, destinationFolder, filenameRoot) {
    return gulp.src(sourceFiles)
        .pipe(plumber())

        // .pipe(sourcemaps.init()) here ???
        .pipe(concat(filenameRoot + '.js'))
        .pipe(sourcemaps.init()) // or here ???

        .pipe(gulp.dest(destinationFolder)) // save .js
        .pipe(uglify({ preserveComments: 'license' }))
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest(destinationFolder)) // save .min.js
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest(destinationFolder)) // save .map
}

我不确定的是sourcemaps.init()位置......

我应该创建多个(在我的情况下是2个)地图文件(如果浏览器支持那么会很好)或只创建一个(/maps/myModule.map)？

我在安装React-native时遇到错误,我试图搜索答案,但我找不到答案.

运行"react-native init meet"时出现此错误:

    This will walk you through creating a new React Native project in /Users/alfred/React/meet
Installing react-native package from npm...
Setting up new React Native app in /Users/alfred/React/meet
module.js:338
    throw err;
    ^

Error: Cannot find module './src/init'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/alfred/React/meet/node_modules/react-native/node_modules/yeoman-generator/node_modules/download/node_modules/vinyl-fs/node_modules/gulp-sourcemaps/index.js:4:9)
    at Module._compile (module.js:434:26)
    at Module._extensions..js (module.js:452:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/alfred/React/meet/node_modules/react-native/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)

我真的没有弄错...

JavaScript 的源映射似乎通常不比令牌粒度更细。例如，身份映射使用令牌粒度。

我知道我看过其他例子，但不记得在哪里。

为什么我们不使用基于 AST 节点的粒度呢？也就是说，如果我们的源映射有所有位置并且只有 AST 节点的开始，那会有什么缺点？

在我的理解中，源映射用于崩溃堆栈解码和调试：永远不会有错误位置或有用的断点不在某个 AST 节点的开头，对吧？

更新 1

一些进一步的澄清：

• 该问题与 AST 已知的情况有关。因此，“生成 AST 比生成令牌数组更昂贵”无法回答这个问题。

• 这个问题的实际影响是，如果我们可以在保留调试器和崩溃堆栈解码器行为的同时降低源映射的粒度，那么源映射可能会小得多。主要优点是调试器的性能：开发工具可能需要很长时间来处理大型源文件，使调试变得痛苦。

• 以下是使用source-map库在令牌级别添加源地图位置的示例：

for (const token of tokens) {
    generator.addMapping({
      source: "source.js",
      original: token.location(),
      generated: generated.get(token).location(),
    });
}

这是在 AST 节点级别添加位置的示例：

for (const node of nodes) {
    generator.addMapping({
      source: "source.js",
      original: node.location(),
      generated: generated.get(node).location(),
    });
}

更新 2

Q1：为什么期望 AST 节点的启动次数少于令牌的启动次数？

A1：因为如果 AST 节点的起始数多于令牌的起始数，那么将会有一个以非令牌开始的 AST 节点。对于解析器的作者来说，这将是一个相当大的成就！为了具体说明，假设您有以下 JavaScript 语句：

const a = function *() { return a …

我是新手,并且遇到了一个可能是非常常见的问题.我正在尝试的东西是将打字稿编译成javascript,为它创建一个源图,然后运行uglify.我想有一个ugliyfied以及非uglified js的源图.

我想要实现的是以下文件结构:

framework.js
framework.js.map < this won't work
framework.min.js
framework.min.js.map

这是我的一项任务:

var gulp = require('gulp'),
uglify = require('gulp-uglify')
ts = require("gulp-typescript")
sourcemaps = require('gulp-sourcemaps')
rename = require('gulp-rename');

var tsProject = ts.createProject("tsconfig.json");


gulp.task('typescript', function(){
    tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject()).js
    .pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version
    .pipe(gulp.dest("dist"))
    .pipe(uglify()) // Code will fail here 
    .pipe(rename({suffix:'.min'}))
    .pipe(sourcemaps.write('.')) // Write sourcemap for minified version.
    .pipe(gulp.dest("dist"));
});

gulp.task('default', ['typescript']);

如您所见,我正在运行sourcemaps.write()两次以获取两个不同的文件.这给了我一个错误

tream.js:74                                                                        
  throw er; // Unhandled stream error in pipe.                                  
  ^ GulpUglifyError: unable to minify JavaScript                                       
at …

使用Typescript 1.8,Gulp 3.9.0,gulp-sourcemaps 1.6.0和tsconfig.json文件.

很久以前,这一点工作得很好.最近(我无法确定何时),Chrome和Firefox都不会实际使用源图.

我在Chrome上启用了源图,并认识到有一个源图,告诉我在控制台中:

"检测到源映射.应将相关文件添加到文件树中.您可以将这些已解析的源文件调试为常规JavaScript文件.可通过文件树或Ctrl + P获取关联文件."

但是,源文件无法通过任何一种方法获得.

在本地构建上构建文件结构(仅使用Login作为示例):

build
  |- resources
      |- js
         |- app.js
         |- app.js.map
         |- typescript
              |- app.ts
              |- sections
                    |- login
                         |- LoginService.ts
                         |- LoginDirective.ts
                         |- LoginController.ts

但是,Chrome只在文件树中显示:

build
  |- resources
      |- js
         |- app.js

而已.没有Typescript文件夹,没有文件.Ctrl-P也找不到它们.因此,当我调试时,我只能调试已编译的app.js文件,而不是查看Typescript代码.

我的gulp文件相关部分:

var ts = require( 'gulp-typescript' ); // compiles typescript
var tsProject = ts.createProject( 'tsconfig.json' );

gulp.task( 'compile:typescript', function () {
    var tsResult = tsProject
        .src() // …

这周末我开始玩gulp.我想建立一个可以的任务

• 编译我的sass文件
  • 如果我在sass文件中出错,继续工作
  • 使用sass Bootstrap
• 生成源图
• 附加浏览器前缀
• 注入已编译的css没有浏览器重新加载
• 快速(开发环境中的1-2秒)

我得到了大部分步骤,但浏览器前缀给了我一个艰难的时间这是我到目前为止所得到的

var browserSync = require('browser-sync');
var reload = browserSync.reload;
var filter = require('gulp-filter');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');

var config = {
    sassPath: './sass',
    bower: './bower_components',
    bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets',
    fonts: './bower_components/bootstrap-sass-official/assets/fonts'
};

gulp.task('sass', function () {
    return gulp.src(config.sassPath + '/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                //outputStyle: 'compressed',
                outputStyle: 'nested',
                precision: 10,
                includePaths: [
                    config.sassPath,
                    config.bower,
                    config.bootstrap …

在我当前的工作流程中,我需要创建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 !== …

我正在寻找一个与Gulp一起使用的插件链,它提供:

• 源地图支持
• 减
• 缩小
• 级联
• 用于解决重定位/连接的URL替换(rebase)

我目前有前四个,但我找不到现有插件的组合,它也会给我最后一个(URL rebasing).我没有找到任何发布源映射的URL rebasing插件.

为了清楚起见,我的问题是,当我从项目开发文件夹中编译多个小CSS文件并将它们输出到公共文件夹时,连接产生的移动会破坏相对URL,例如背景图像.

EDITS:

听起来我目前使用的工具链已经打算解决这个问题.所以,这表面上是答案.但是,这引发了另一个问题,即所需语法应该如何工作.

这个问题在理论上有很多重复:

• clean-css#152:重新定位功能非常令人沮丧
• clean-css#195:rootWindows上的选项
• clean-css#263:如何让relativeTo选项在不同的路径中使用CSS文件
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin重新定位相对URI？

不幸的是,没有答案实际解释语法,他们只是展示伏都教; 所以我不知道为什么以下不起作用.如果我能解决它,我会回到这里并标记这个被接受,表明这个工具链确实做了我需要的.

源文件:

/assets
    /site
        styleInput1.less "url(../site/logo.png)"
        logo.png
        background.png
    /application
        styleInput2.less "url(../site/background.png)"

gulp任务:

gulp.task(filename, function () {
    return gulp.src(files)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCss({ relativeTo: './compiled' }))
        .pipe(concat(filename))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./compiled'));
});

输出,URL损坏.注意多个缺陷.虽然CSS是相对于所需资产引发的目录级别,但已添加了一个额外的父目录(!).此外,其中一个URL已更改硬资产文件夹名称(!).很奇怪:

/compiled
    styleOutput1.css "url(../../compiled/logo.png)"
    styleOutput2.css "url(../../site/background.png)"

我为继续伏都教道歉,但这是我的工作管道:

.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))

而正确的输出:

/compiled
    styleOutput1.css "url(../assets/site/logo.png)"
    styleOutput2.css "url(../assets/site/background.png)"

我有一个我在VSCode中开发的Angular2 /打字稿应用程序.我使用Gulp构建typescript文件和gulp-sourcemap来创建地图文件.在对VSCode的chrome调试扩展进行一些修补之后,附加/启动chrome很有效,但我无法获得断点.我使用"dnx web"运行网站,但我认为这不重要.

我的文件夹结构是这样的:

project/wwwroot/index.html
project/wwwroot/app/myfile.js
project/wwwroot/app/myfile.js.map
project/scripts/myfile.ts

我launch.json看起来像这样:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8001/portfolios",
      "runtimeArgs": [
          "--new-window", //Open in new window
          "--user-data-dir=C:/temp/", 
          "--remote-debugging-port=9222" 
      ],
      "webRoot": "${workspaceRoot}/wwwroot", 
      "sourceMaps": true
    }
  ]
}

我的gulp构建任务看起来像这样:

gulp.task('ts', function (done) {
  var files = gulp.src(tsToMove)
    .pipe(sourcemaps.init())
    .pipe(ts(tsConfig), undefined, ts.reporter.fullReporter());
    return files.js.pipe(sourcemaps.write(".",{sourceRoot: '../scripts'}))
    .pipe(gulp.dest('scripts'));
})

我已经验证了地图文件的生成并存储在与js文件相同的文件夹中.建设的时候.

谢谢你的任何提示.