Question

我正在使用带有cssmin的grunt来缩小和连接css文件。 Css文件很好地连接和缩小，但当我尝试在＆lt; Sources＆＃39; cssmin＆＃39;下的chrome dev工具中观看非缩小文件时选项卡，文件显示为空。这是我的cssmin: { options: { report: 'gzip', keepSpecialComments: 0, sourceMap: true, outputSourceFiles: true }, target: { files: { 'web/assets/dist/css/vendors.min.css': [ 'bower_components/bootstrap/dist/css/bootstrap.min.css', 'bower_components/chosen/chosen.min.css', 'bower_components/slabText/css/slabtext.css', 'bower_components/video.js/dist/video-js.css', 'bower_components/video.js/dist/video-js.css' ], 'web/assets/dist/css/app.min.css': [ 'app/Resources/assets/css/jumbotron-narrow.css', 'app/Resources/assets/css/custom.css', ], } } },任务：

web/assets/dist/css/app.min.css.map

在chrome下启用了源地图设置。 { "version":3, "sources":["app/Resources/assets/css/jumbotron-narrow.css","app/Resources/assets/css/custom.css"], "names":[], "mappings":"AAeA,QAdA,KAeI,eAAgB,KADpB,QA6BA,WAEI,cAAe,IAAI,MAAM,QA7C7B,KACI,YAAa,KCUb,YAAa,eAAkB,WDHnC,QAFA,QACA,WAEI,cAAe,KACf,aAAc,KASlB,WACI,WAAY,EACZ,cAAe,EACf,YAAa,KAIjB,QACI,YAAa,KACb,MAAO,KACP,WAAY,IAAI,MAAM,QAI1B,yBACI,WACI,UAAW,OAGnB,qBACI,OAAQ,KAAK,EAIjB,WACI,WAAY,OAGhB,gBACI,QAAS,KAAK,KACd,UAAW,KAIf,WACI,OAAQ,KAAK,EAEjB,gBACI,WAAY,KAIhB,oCAII,QAFA,QACA,WAEI,cAAe,EACf,aAAc,EAGlB,QACI,cAAe,KAGnB,WACI,cAAe,GC3EvB,WACI,YAAa,eACb,IAAK,iCAAkC,mBAG3C,WACI,YAAa,YACb,IAAK,8BAA+B,mBAOxC,GACI,WAAY,KACZ,eAAgB,UAChB,YAAa,EACb,YAAa,YAAe,WAC5B,YAAa,EAAI,EAAI,IAAI,KAG7B,4BACI,QAAS,MACT,YAAa,KACb,aAAc,KACd,cAAe,IAGnB,UACI,UAAW,MACX,WAAY,KAIhB,oBACI,MAAO,IAGX,sBACI,gBAAiB,KACjB,YAAa,EAGjB,cACI,aAAc,QAIlB,iCACI,QAAS" }看起来像这样：

 "grunt-contrib-cssmin": "^0.12.0",

我的package.json中的版本：

<?php

class user {

    public function __construct() {
        if ($this->palindrome()) {
            echo 'Yes, Palindrome';
        } else {
            echo 'Not a palindrome';
        }
    }

    public function palindrome() {
        //Need $ symbol
        $str = "abba";

        $i = 0;
        //                                 \/
        while ($str[$i] == $str[strlen($str) - ($i + 1)]) {
            $i++;

            if ($i > strlen($str) / 2) {
                return 1;
            }
        }
        return 0;
    }

}

;

$obj = new user();

我做错了什么？

Answer 1

修改：首先，尝试在root的{{1}}中指定options，如下所示：

Gruntfile.js

问题

// ... cssmin: { options: { // ... root: 'web/assets/dist/css/' // <-- Add this too. }, target: { // ... } /...生成的 sourceMap 文件错误地指定了grunt-contrib-cssmin数组中的路径。结果 sourceMap 应如下所示：

<强> app.min.css.map

sources

请注意{em> sourceRoot 前缀{ "version":3, "sources":[ "../../../../app/Resources/assets/css/jumbotron-narrow.css", "../../../../app/Resources/assets/css/custom.css" ], "names":[], "mappings":"AAeA,QAdA,KAeI,eAAgB,KADpB,QA6BA,WAEI,cAAe,IAAI,MAAM,QA7C7B,KACI,YAAa,KCUb,YAAa,eAAkB,WDHnC,QAFA,QACA,WAEI,cAAe,KACf,aAAc,KASlB,WACI,WAAY,EACZ,cAAe,EACf,YAAa,KAIjB,QACI,YAAa,KACb,MAAO,KACP,WAAY,IAAI,MAAM,QAI1B,yBACI,WACI,UAAW,OAGnB,qBACI,OAAQ,KAAK,EAIjB,WACI,WAAY,OAGhB,gBACI,QAAS,KAAK,KACd,UAAW,KAIf,WACI,OAAQ,KAAK,EAEjB,gBACI,WAAY,KAIhB,oCAII,QAFA,QACA,WAEI,cAAe,EACf,aAAc,EAGlB,QACI,cAAe,KAGnB,WACI,cAAe,GC3EvB,WACI,YAAa,eACb,IAAK,iCAAkC,mBAG3C,WACI,YAAa,YACb,IAAK,8BAA+B,mBAOxC,GACI,WAAY,KACZ,eAAgB,UAChB,YAAa,EACb,YAAa,YAAe,WAC5B,YAAa,EAAI,EAAI,IAAI,KAG7B,4BACI,QAAS,MACT,YAAa,KACb,aAAc,KACd,cAAe,IAGnB,UACI,UAAW,MACX,WAAY,KAIhB,oBACI,MAAO,IAGX,sBACI,gBAAiB,KACjB,YAAa,EAGjB,cACI,aAAc,QAIlB,iCACI,QAAS" }添加到../../../../数组中的每个路径。

在SourceMap Specification部分中写着：

解析来源

如果在“sourceRoot”前置之后源不是绝对URL，则相对于SourceMap解析源（如在html文档中解析脚本src）。

如果指定sources路径（如最初提到的那样），则无法解决问题，那么它表明root未遵守规范的这一部分

替代解决方案

如果初始建议的修补程序不起作用，请考虑添加自定义Task以调用在创建 sourceMap（s）之后修复每个grunt-contrib-cssmin路径的函数sources。

你可以这样做：

<强> Gruntfile.js

grunt-contrib-cssmin

备注

名为module.exports = function (grunt) { grunt.initConfig( { cssmin: { options: { report: 'gzip', keepSpecialComments: 0, sourceMap: true, outputSourceFiles: true }, target: { files: { 'web/assets/dist/css/vendors.min.css': [ 'bower_components/bootstrap/dist/css/bootstrap.min.css', 'bower_components/chosen/chosen.min.css', 'bower_components/slabText/css/slabtext.css', 'bower_components/video.js/dist/video-js.css' ], 'web/assets/dist/css/app.min.css': [ 'app/Resources/assets/css/jumbotron-narrow.css', 'app/Resources/assets/css/custom.css' ] } } } }); /** * Helper function prefixes sources paths in sourceMap files with a sourceRoot. * * `grunt-contrib-cssmin` does not apply the correct sourceRoot for each * path in the `sources` Array. See github issue #248 for further info: * (https://github.com/gruntjs/grunt-contrib-cssmin/issues/248) * * @param {String} filePath - The path to the sourceMap to fix. * @param {String} sourceRootPrefix - The sourceRoot prefix e.g. ../../ */ function prefixSourceMap(filePath, sourceRootPrefix) { var json = grunt.file.readJSON(filePath); json.sources = json.sources.map(function (_path) { return sourceRootPrefix + _path; }); grunt.file.write(filePath, JSON.stringify(json)); } // Register Task to invoke function for fixing paths in each sourceMap file. grunt.registerTask('fixSourceMaps', 'Fix paths in each sourceMap', function () { prefixSourceMap('web/assets/dist/css/vendors.min.css.map', '../../../../'); prefixSourceMap('web/assets/dist/css/app.min.css.map', '../../../../'); }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.registerTask("default", [ 'cssmin', 'fixSourceMaps' // <-- Must be after cssmin tasks. ]); };的自定义grunt.registertask会为每个 sourceMap 文件调用fixSourceMaps函数进行修复。

将两个参数传递给prefixSourceMap函数，即：

prefixSourceMap - 要修复的sourceMap的路径。

filePath - sourceRoot前缀，例如sourceRootPrefix

要修复 sourceMap 文件（../../和vendors.min.css.map），app.min.css.map参数指定为sourceRootPrefix - 这是指定的由于结果../../../../文件与目标结构中原始未分析源.min.css文件的位置之间的关系而导致的四个级别。

如果要添加另一组.css文件以缩小到.css任务，其中生成的cssmin.target.files文件与未明确的源.min.css文件不是四个级别，您需要指定不同的.css值。

例如，假设在sourceRootPrefix中缩小了以下css：

cssmin.target.files

由于结果// ... target: { files: { //... 'web/assets/quux.min.css': [ // <-- Two levels deep 'path/to/file/foo.css', 'path/to/file/baz.css' ], // ... } } // ...保存在深度为两级的目录中，因此quux.min.css参数将作为sourceRootPrefix传递给prefixSoureMap函数。例如：

'../../'

Answer 2

如上面的评论所述，我的Gruntfile中有2个问题：

缺少root指令，如@RobC

网络服务器无法访问原始资产，因此我将它们移动到虚拟主机的Web根目录下的某个位置。就我而言web/assets。这是我正在运行的cssmin任务：

cssmin: {
    options: {
        root: 'web/assets/dist/css/',
        report: 'gzip',
        keepSpecialComments: 0,
        sourceMap: true,
        outputSourceFiles: true
    },
    target: {
        files: {
            'web/assets/dist/css/app.min.css': [
                'web/assets/css/jumbotron-narrow.css',
                'web/assets/css/custom.css',
            ],
        }
    }
},

grunt-contrib-cssmin：css源地图在开发工具中显示为空

2 个答案:

问题

替代解决方案