标签: gulp-sourcemaps

我在我的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是文件路径的数组。不知道如何调试它。

我正在尝试创建一个gulp任务来同时压缩和创建源映射.压缩和源映射创建工作,但我似乎无法弄清楚如何在使用gulp-rename插件时正确获取输出名称.

为了简化:我source.js在/src文件夹中有一个文件,我想在文件夹中创建.min.js和.js.map文件/dist.

这就是我所拥有的:

gulp.task('scripts', function () {

// compressed
gulp.src(['src/*.js'])
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
    .pipe(uglify())        
    .pipe(sourcemaps.write('./', {
        sourceMappingURL: function(file) {
            return file.relative + '.map';
        }
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./dist'));
});

这适用于它在以下方面创建以下内容/dist:

• jquery-resizable.min.js (所有好的 - 压缩,地图参考和正确的名称)
• jquery-resizable.js.min.map (地图在那里,但名字不好 - 应该是jquery-resizable.js.map)

我已经尝试了大量的变化,但我无法弄清楚如何获得地图和压缩来构建并获得正确的文件名.

我也试过在一个单独的步骤中重命名文件,但由于gulp的异步性质,这不能可靠地工作 - 有时它有效它不会这样看起来也不是一个选项.

我错过了什么？

我没有以这种方式创建源图,但是这样做的正确方法是什么？我看到的所有示例似乎都按照上面的操作执行,除非它们不将输出文件重命名为min.js,这似乎是该过程的重要部分.

似乎地图文件指向错误的文件.而不是demo.css它指向example.css,例如.

我想我做错了什么？

这是我的css任务如何为CSS缩小和连接定义的示例:

var gulp = require('gulp');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-clean-css');
var gp_concat = require('gulp-concat');
var size = require('gulp-size');

var path ={
    css: './styles/',
    dist: './dist/'
};

gulp.task('css', function() {
    gulp.src([
            './bower_components/aaa.css',
            path.css + 'demo.css',
            path.css + 'example.css',
            path.css + 'another.css'
        ])
        .pipe(sourcemaps.init())
        .pipe(gp_concat('combined.css'))
        .pipe(gulp.dest(path.dist))
        .pipe(minifyCss({
            compatibility: 'ie8',
            advanced: false,
            keepSpecialComments: '1'
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sourcemaps.write({
            includeContent: false,
            sourceRoot: '../styles'
        }))
        .pipe(gulp.dest(path.dist)) …

这是随机发生的,因为我正在更新我的CSS文件,然后刷新以注意没有显示任何更改.我最终注意到我的Gulpfile.js下的Task Runner Explorer窗口"无法加载",并且没有列出任何构建过程.

然后我做了一些研究并重新排序了外部工具列表,正如一些SO线程所提到的那样,什么也没做.然后我注意到gulpfile.js需要一些文件:

var gulp = require("gulp"),
   gulpless = require("gulp-less"),
   sourcemaps = require("gulp-sourcemaps"),
   rimraf = require("rimraf");

这些都不在node_modules文件夹中所以我完成了npm install gulp-less和npm install gulp-sourcemaps,现在在Output> Task Runner Explorer中检查并出现以下错误.

无法运行"C:\ projects\Fusion\FusionMVC\Gulpfile.js"...

cmd.exe/c gulp --tasks-simple

C:\项目\融合\node_modules \吞-sourcemaps \node_modules\strip-.bom\index.js:2

module.exports上的module.exports = x => {^ SyntaxError:Module._compile(module.js:439:25)处的异常令牌>,位于Object.Module._extensions..js(module.js:474:10)处( module.js:356:32)在Function.Module._load(module.js:312:12)的Module.require(module.js:364:17)at的require(module.js:380:17)处.(C:\ projects\Fusion \node_modules\gulp-sourcemaps\src\init.js:10:14)在Module._compile(module.js:456:26)的Object.Module._extensions..js(module.js) :474:10)在Function.Module._load的Module.load(module.js:356:32)(module.js:312:12)

任何可能出错的线索或解决方案以及如何使其正常工作都会很棒!通过大多数SO线程,该解决方案无法正常工作.

Chrome不会为HTML内联包含的脚本加载源地图。

<script type="text/javascript">!function t(n,e,r){ /* more code */}()
//# sourceMappingURL=public/js/edit-before.js.map
</script></body>

我知道Chrome不会请求源地图，因为我将服务器设置为记录所有请求，并且还检查了Chrome网络控制台。我验证了源映射的路径是正确的，浏览器没有找到它。

Chrome是否应在script代码中加载JS的源映射？如果是这样，我在做什么错？

我使用 gulp-sourcemaps 从 SASS 文件生成 CSS 和 Source Mpas，我注意到有时，当一个元素color定义为变量时，sourcemap 指向变量的 SCSS 文件，而不是元素的 SCSS 文件。

因此，例如，如果一个元素的样式是“_nav.scss”，而color变量在“_colors.scss”中定义：

.navigation-top a {
    font-weight: 600;
    color: $color__topnav-text;
    transition: color 0.2s;
}

此元素的 CSS 源映射指向 Chrome 开发工具中的“colors.scss”而不是“nav.scss”。这仅适用于少数元素。对于大多数使用color变量的元素，DevTools 仍然指向正确的 SCSS 文件。

这是 Chrome 的错误，还是生成的 Source Map 有问题？

我users.ts在子目录中有一个打字稿文件routes.

gulp代码gulpfile.js:

var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .js
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})) 
    .pipe(gulp.dest('.'));

生成的源映射gulp-sourcemaps不适用于VSCode:

{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}

在VSCode中正常生成的tsc源映射:

{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}

并且VSCode断点与生成的源映射一起正常工作tsc.

那么如何配置gulp-typescript/gulp-sourcemaps生成相同的源图tsc？

您好我有以下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'
        })) …

Gulp/npm noobie在这里.

我正在尝试使用gulp-sourcemaps,并且出于某种原因,它会崩溃var sourcemaps = require('sourcemaps').(只有当文件中的这一行崩溃时才会崩溃)

gulpfile:

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


gulp.task('generateApp', function () {
    return gulp.src([some paths...])
        .pipe(sourcemaps.init())
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path...));
});

错误:

C:\Projets\node_modules\strip-bom\index.js:2
module.exports = x => {
                    ^
SyntaxError: Unexpected token >
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (C:\Projets\node_modules\gulp-sourcemaps\src\init.js:10:14)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32) …