grunt + sass：同時輸出2個css文件

我想要grunt編譯我的sass的壓縮版本。我可以讓它編譯一個或另一個，但不能同時編譯。我曾嘗試：grunt + sass：同時輸出2個css文件

sass: { 
     dist: { 
      options: { 
       style: 'compressed' 
      }, 
      files: { 
       'style.min.css': 'css/main.scss', 
      } 
     } 
    }, 

    sass: { 
     dist: { 
      options: { 
       style: 'compact' 
      }, 
      files: { 
       'style.css': 'css/main.scss', 
      } 
     } 
    }

也：

sass: { 
     dist: { 
      options: { 
       style: 'compressed' 
      }, 
      files: { 
       'style.min.css': 'css/main.scss', 
      } 
     }, 
     dist: { 
      options: { 
       style: 'compact' 
      }, 
      files: { 
       'style.css': 'css/main.scss', 
      } 
     } 
    }

但無論工作過。什麼是解決方案？

來源

2015-04-14 ric0c

你也可以使用其他grunt任務來壓縮你的風格爲https://github.com/gruntjs/grunt-contrib-cssmin – romuleald

看看我是否在我的項目的辦法，我可能是絕對錯誤的，但我也有類似的意向，以創建一個文件可讀性等爲縮小目的。

sass: { 
    appStyles: {options: {style: 'expanded', sourcemap: 'none'}, files: {'styles/app.css': 'styles/app/main.scss'}}, 
    appStylesMinified: {options: {style: 'compressed', sourcemap: 'none'}, files: {'styles/app.min.css': 'styles/app.css'}} 
}

注意，我所選擇兩個appStyles和appStylesMinified的style分別expanded和compressed。另外，compressed版本將新創建的app.css文件替換爲main.scss以進一步創建app.min.css。

我發現這個app.css在調試時有點用處，當我還處於開發模式時。但是當然，當所有東西都準備就緒時，app.min.css就會從中取出。

來源

2015-04-14 10:30:11

謝謝@TahirAhmed，工作得很好。我是新來的咕嚕，所以我沒有意識到你可以自定義聲明像appStyles（我假設它是自定義的，因爲我沒有在文檔中找到）。感謝您解決我的問題，並在同一時間教育我！ – ric0c

很高興幫助。是的，聲明'appStyles'和'appStylesMinified'是自定義和可改變的。不用謝。 –

你爲什麼要壓縮saas文件，你可以直接在你的saas文件中使用@import，你的單個文件將準備好，然後使用compress。只需創建一些類似main.scss的內容，然後導入其中的所有saas文件，然後壓縮此文件。

編輯：

grunt.initConfig({ 
    sass: { 
    dist: { 
     files: { 
     'main.css': 'main.scss', 
     'main1.css': 'main1.scss' 
     } 
    } 
    } 
});

來源

2015-04-14 09:56:18 Kushal

嗨@Kushal，謝謝你的迴應。如果我可以澄清我的問題，我希望sass一次輸出兩個css文件，當我運行grunt時，它既是可讀的css文件，又是精簡的css文件。我已經在做你正在我的主scss文件中使用import的建議。謝謝。 – ric0c

編輯上面的代碼，你可以試試看，如果它適合你 – Kushal

我發現下面的代碼工作得很好。而不是依靠sass輸出不同壓縮的多個文件，我有sass輸出緊湊的風格，然後使用grunt-contrib-cssmin進一步壓縮css。

module.exports = function(grunt) { 

    grunt.initConfig({ 
    sass: { 
     dist: { 
     options: { 
      style: 'compact' 
     }, 
     files: { 
      'style.css': 'css/main.scss', 
      'style1.css': 'css/main1.scss', 
     } 
     } 
    }, 
    cssmin: { 
     dist: { 
     files: { 
      'style.min.css': ['style.css'], 
      'style1.min.css': ['style1.css'] 
     } 
     } 
    } 
    }); 

    grunt.loadNpmTasks('grunt-contrib-sass'); 
    grunt.loadNpmTasks('grunt-contrib-cssmin'); 

    grunt.registerTask('default', ['sass', 'cssmin']); 

};

你甚至不需要緊湊的選項。這將使輸出CSS更容易閱讀。

來源

2015-04-14 10:14:35 evolutionxbox

grunt + sass：同時輸出2個css文件

回答

相關問題