标签: gulp-uglify

我有一个相当标准的用例 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,Uglify和Concat的工作组合来生成有效的源地图？在GitHub中似乎存在很多关于这些类型的交互的问题,但同样地,人们似乎找到了成功运作的组合.我尝试了很多变化,但是当我打开uglify时,符号映射不起作用,断点在浏览器中无法正常工作.例如,以下工作正常:

return gulp.src('/scripts/*.js')
            .pipe(sourcemaps.init())
            //.pipe(uglify())
            .pipe(concat(outputName + '.min.js'))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(outputPath))
            .on('end', function() { gutil.log('Minified ' + outputName); })
            .on('error', handleError);

但是取消注释uglify并没有.

我创建了一个GitHub repo来重现这个问题:https://github.com/jamescrowley/gulpIssues

我写了一个任务来缩小我的.js文件.

现在,基于VS15的配置模式,我希望有条件地对它们进行uglify(如果在发布时执行,请不要在调试中),例如 .

是否有可以从gruntfile访问的变量？

我有以下用于捆绑 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 破坏名称后无法跟踪变量。

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

我正在为一个非常恼人的错误而苦苦挣扎.首先:我是新来的.

我尝试用Angular实现单页面应用程序.为了使我的工作流程更好,我尝试实现gulp.

我在安装一些gulp插件时遇到了一些严重的npm错误,但这是另一个故事,我意识到,它有或没有错误.

我真正想到的是useref插件.或者更确切地说,uglify插件.

这是在我的gulpfile.js中:

gulp.task('useref', function() {
  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'))
});

这是它在尝试运行时抛出的堆栈跟踪.C:\ Work\evori-portfolio> gulp useref

[16:32:40] Using gulpfile C:\Work\evori-portfolio\gulpfile.js
[16:32:40] Starting 'useref'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
 Error
    at new JS_Parse_Error (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1526:18)
    at js_error (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1534:11)
    at croak (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2025:9)
    at token_error (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2033:9)
    at expect_token (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2046:9)
    at expect (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2049:36) …

我目前正在重构一个项目,以前所有缩小的JavaScript文件都放在一个特定的目录中.现在我需要将缩小版本保留在与其源文件相同的目录中.

目前我这样做:

gulp.task( 'scripts', function () {
    return gulp.src( source_paths.scripts )
        .pipe( uglify( {
            preserveComments: 'false'
        } ) )
        .pipe( rename( {suffix: ".min"} ) )
        .pipe( gulp.dest( './build/js' ) )
        .pipe( notify( {
            message: 'Scripts task complete!',
            onLast : true
        } ) );

} );

这有效,除了它移动我的文件.我试图改变我的使用gulp.dest()来.pipe( gulp.dest( '' ) )以及刚刚删除该行.在这两种情况下都没有编写缩小的JS,我非常难过.

如何将所有文件写入与源文件相同的目录？

嗨,我正在为我工​​作的公司制作一个主题,并且JS段将无法在uglify中正确构建.我试图使用uglify来简单地连接我的文件,但是它们输出缩小和损坏而没有注释我无法弄清楚为什么,下面是我的gulp任务,它运行正确,但没有输出提供的选项

gulp.task('js', function() {
return gulp.src('./src/js/*.js')
    .pipe(uglify({
        options: {
            mangle: false,
            beautify: true,
            comments: true
        }
    }))
    .pipe(rename('cf247bootstrapTheme.js'))
    .pipe(gulp.dest('./dist/js'));
});

任何想法为什么会这样？

谢谢,

基兰

您好我有以下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() {
});