标签: minify

问题在于:我们有很多Javascripts和很多CSS文件,我们宁愿将其缩小.缩小很简单:设置YUI Compressor,运行Ant任务,然后吐出缩小的文件,我们将其保存在原件旁边.

因此,我们最终在DocumentRoot中的某个位置结束了以下目录结构:

/
   /js
      /min
         foo-min.js
         bar-min.js
      foo.js
      bar.js
      quux.js
   /css
      ...

现在我们需要的是Apache服务于min子目录中的文件,如果它们的缩小版本不可用,则回退到提供未压缩文件.最后一个问题是我无法解决的问题.

例如:假设我们有一个请求example.com/js/foo.js -在这种情况下的Apache应该发送的内容/js/min/foo-min.js.没有缩小的quux.js,所以请求/js/quux.js回报/js/quux.js本身,而不是404.最后,如果没有/js/fred.js,它应该有404结束.

其实,我设置建立在unminified文件不会被部署在生产服务器上这样的脚本,但这种配置可能仍是一个整合服务器和开发机器有用.

我有一些代码具有以下格式:

function myfunc1 () { ... jquery.bind('click', myfunc2) ... }
function myfunc2 () { ... }
...

是的,功能是全局的,但是因为我在谷歌浏览器扩展内容脚本中编写,所以它是沙箱.

现在,我正在尝试缩小和混淆代码.我已经尝试过YUI Compressor和Google Closure编译器.问题是,我无法弄清楚如何缩小/混淆全局函数名称.使用YUI时,如果它们被外部调用,它不会缩小全局变量.在高级模式下关闭,似乎它可以重命名全局变量,但是我遇到了死代码删除的问题.大多数函数似乎都已死,因为它们依赖于DOM交互和事件处理,并且不会直接调用.

那么关于如何缩小这些全局变量的任何想法？我是否需要编写脚本来进行一些正则表达式替换？如果能更好地适应缩小模式(例如,添加到闭包或诸如此类的东西),我也愿意重构我的代码

我有以下代码:

getTrainPlanDetail: function(id){
        var df = new $.Deferred();
        $.post( config.api, addJSONHeaders("detail_fiche_entrainement",{"idRequete": id}), function(data){
            if (ajaxEval(data)){
              df.resolve(data);
            } else {
                df.fail(data);
            }
        }, 'json').fail(function(jqXHR, textStatus, errorThrown){
            df.fail();
        });
        return df.promise();
    },

缩小后,它会转换为:

getTrainPlanDetail: function(a) {
        var b = new $.Deferred;
        return $.post(config.api, addJSONHeaders("detail_fiche_entrainement", {idRequete: a}), function(a) {
            ajaxEval(a) ? b.resolve(a) : b.fail(a)
        }, "json").fail(function() {
            b.fail()
        }), b.promise()
    }

你注意到回归的问题吗？我想返回b.promise(); 不是$ .post有人能告诉我为什么会这样吗？对我来说没有意义.

我正在使用缓冲区清理程序,如PHP手册评论中所示,但在textareas中遇到双重换行问题.

从我的数据库中拉出一个字符串,包含double/triple/quadruple换行符,并将其放入a中时textarea,换行符将减少到只有一个换行符.

因此:是否有可能具备的功能排除之间的所有输出<pre>,<textarea>并且</pre>,</textarea>？

看到这个问题,如何在不删除IE条件注释的情况下缩小php html输出？,我想我需要使用preg_match,但我不知道如何将它实现到这个函数中.

我正在使用的功能是

function sanitize_output($buffer) {
    $search = array(
        '/\>[^\S ]+/s',  // strip whitespaces after tags, except space
        '/[^\S ]+\</s',  // strip whitespaces before tags, except space
        '/(\s)+/s'       // shorten multiple whitespace sequences
    );

    $replace = array(
        '>',
        '<',
        '\\1'
    );

    $buffer = preg_replace($search, $replace, $buffer);

    return $buffer;
}

ob_start("sanitize_output");

是的,我正在使用这种消毒杀菌剂,并GZIP尽可能获得最小的尺寸.

我有Gulp设置将我的LESS文件转换为CSS,连接它们并缩小它们.我的JS也一样.我想在每个缩小的CSS/JS输出文件的开头有一个小注释,其中包含文件的构建时间.有些东西可以让我一目了然地查看生产中使用的文件,而无需通过缩小的代码搜索更新.

就像是:

/*生成于:02-21-2015 @ 08:00:00*/

我还没有看到任何方法来做到这一点.我熟悉Gulp rev插件,但更多的是缓存破坏,我绝对不想破坏这些文件的缓存.我只需要一目了然地看到文件生成的时间.

如何通过play-framework缩小JS和CSS？

"Google Closure Compiler"不再是一个选项,因为它被删除了.

我正在使用Play Activator 2.3.7

注意:此问题不重复,因为Google Closure Compiler已从激活器2.3.7中删除.

在纯前端应用程序中缩小和捆绑js/css的最佳实践是什么？这些工具如何工作？

我知道如何使用.NET/Java/LAMP等服务器端应用程序来完成这项工作.但是,如今纯粹的前端项目,SPA项目或后端项目如何构建,比如说,ember或angular？假设整个项目由HTML/css/js组成,它与其他地方的RESTful服务连接.

您使用什么样的过程或工具来缩小和捆绑资源？

我已经看过为此存在的grunt插件,但我发现文档非常神奇,我仍然不清楚它们是如何工作的.

具体来说,该工具是:

1)用src ="/ js/bundle-a + b.min.js"替换src ="/ js/a.js",src ="/ js/b.js"？(和css一样？)在源html文件中？

2)开发和发布有不同的模式,或者工具只在项目发布时运行？

或者资源请求是否完全由js工具管理,并且必须通过库函数请求js/css文件？在这种情况下,滞后不会明显吗？

谢谢.

我正在使用Gulp完成johnpapa关于自动化的课程,并且似乎遇到了一个奇怪的问题:当我试图运行CSS和JS连接和缩小任务时,它无法进行缩小.

这是任务:

gulp.task('optimize', ['inject'], function () {

    var assets = $.useref.assets({searchPath: ''});
    var cssFilter = $.filter(['**/*.css'], {restore: true});
    var jsFilter = $.filter(['**/*.js'], {restore: true});

    return gulp
        .src(config.indexFile)
        .pipe($.rename('test.jsp'))
        .pipe($.plumber())
        .pipe(assets)
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore)
        .pipe(jsFilter)
        .pipe($.uglify())
        .pipe(jsFilter.restore)
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe(gulp.dest(config.indexLocation))
        ;
});

inject是注入css和js引用索引文件(正常工作)的任务,$是require('gulp-load-plugins')({lazy: true})和config.indexFile是index.jsp.

我的文件结构(与课程中的文件结构不同)是:

- ModuleDir
    - dist
        - css
            - lib.css
            - app.css
        - fonts
        - images
        - js
            - lib.js
            - app.js
    - css
    - js
    - web-app
        - …

当我使用gulp-uglify来缩小Javascript文件时,订单会搞砸.

让我们说我的任务按预期工作:

var gulp = require('gulp');
var rename = require('gulp-rename');
var gp_concat = require('gulp-concat');

gulp.task('js', function() {
    gulp.src([
            './public/bower_components/jquery/dist/jquery.min.js',
            './public/js/functions.js',
        ])
        .pipe(gp_concat('combined.js'))
        .pipe(gulp.dest(path.js + '/dist'))
});

添加丑化线,它改变了顺序jquery和functions文件,并将functions.js以上jquery.

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var gp_concat = require('gulp-concat');

gulp.task('js', function() {
    gulp.src([
            './public/bower_components/jquery/dist/jquery.min.js',
            './public/js/functions.js',
        ])
        .pipe(gp_concat('combined.js'))
        .pipe(gulp.dest(path.js + '/dist'))
        .pipe(uglify({
            preserveComments: 'license'
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(path.js + '/dist'))
});

任何可能的解决方案？当然,functions.js只是一个带有函数的平面Javascript文件,并没有包含在IIFE中.

webpack缩小版本的js不起作用,同时它在没有缩小时工作正常.

javaScript代码:https://github.com/athimannil/online-booking/blob/webpack/src/index.js

bundle.js:6 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: e
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=e
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20419
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19328)
    at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19633)
    at Object.o [as invoke] (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19854)
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18700)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18839
    at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
    at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
    at dt (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20616)
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Funpr%3Fp0%3De%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A571%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20419%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19328)%0A%20%20%20%20at%20a%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19633)%0A%20%20%20%20at%20Object.o%20%5Bas%20invoke%5D%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19854)%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18700)%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18839%0A%20%20%20%20at%20i%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A1003)%0A%20%20%20%20at%20p%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18601)%0A%20%20%20%20at%20dt%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20616)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20419
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19328)
    at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19633)
    at Object.o [as invoke] (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19854)
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18700)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18839
    at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
    at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
    at dt …