源地图行为 - 如何在缩小之前查看原始javascript

时间:2015-06-22 21:15:01

标签: javascript angularjs gulp source-maps gulp-uglify

我已经构建了一个带有gulp-angular的测试应用程序。我认为源地图是自动生成的。在我构建应用程序之后,当我查看vendor-xxx.js时,它看起来像:

                        /*!
                         * jQuery JavaScript Library v2.1.4
                         * http://jquery.com/
                         *
                         * Includes Sizzle.js
                         * http://sizzlejs.com/
                         *
                         * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
                         * Released under the MIT license
                         * http://jquery.org/license
                         *
                         * Date: 2015-04-28T16:01Z
                         */
                        !function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){function n(e){var t="length"in e&&e.length,n=Q.type(

这还在缩小吗?

如何查看原始javascript文件?

PS。这就是app-xxx.js的样子:

                    !function() {
                        "use strict";
                        angular.module("test", ["ngAnimate", "ui.router", "ui.bootstrap"])
                    }(), function() {
                        "use strict";
                        function t() {
                            function t() {
                                return n
                            }
                            var n = [{title: "AngularJS",url: "https://angularjs.org/",description: "HTML enhanced for web apps!",logo: "angular.png"}, {title: "BrowserSync",url: "http://browsersync.io/",description: "Time-saving synchronised browser testing.",logo: "browsersync.png"}, {title: "GulpJS",url: "http://gulpjs.com/",description: "The streaming build system.",logo: "gulp.png"}, {title: "Jasmine",url: "http://jasmine.github.io/",description: "Behavior-Driven JavaScript.",logo: "jasmine.png"}, {title: "Karma",url: "http://karma-runner.github.io/",description: "Spectacular Test Runner for JavaScript.",logo: "karma.png"}, {title: "Protractor",url: "https://github.com/angular/protractor",description: "End to end test framework for AngularJS applications built on top of WebDriverJS.",logo: "protractor.png"}, {title: "Bootstrap",url: "http://getbootstrap.com/",description: "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.",logo: "bootstrap.png"}, {title: "Angular UI Bootstrap",url: "http://angular-ui.github.io/bootstrap/",description: "Bootstrap components written in pure AngularJS by the AngularUI Team.",logo: "ui-bootstrap.png"}, {title: "Stylus",url: "http://learnboost.github.io/stylus/",description: "Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.",logo: "stylus.png"}];
                            this.getTec = t
                        }
                        angular.module("test").service("webDevTec", t)
                    }(), function() {
                        "use strict";
                        function t() {

1 个答案:

答案 0 :(得分:1)

我使用单独的gulp任务进行开发与生产。因此,当我运行gulp --debug时,它将跳过缩小构建步骤。所以如果你没有这样的步骤,可能值得设置。

查看npm包:gulp-ifyargs

我不熟悉Source Maps,但我相信点击Chrome开发者工具中的Pretty JavaScript/CSS按钮可能会有所帮助......?