0

わかりました、Node / Grunt を使用してアセット ビルダー アプリを構築しています。私が持っているアイデアは、さまざまなプロジェクトを管理し、出力を連結/コンパス/縮小できるようにすることです。

今、私はこれまでに行ってきたことのほとんどを機能させています。JS ファイルを連結することはできますが (minify let はありません)、SASS ファイルの処理方法について少し問題があります。

Grunt team contrib compass タスクを使用して、SASS を CSS にコンパイルしました。ただし、ファイルを連結するにはどうすればよいですか?

concat と Grunt を使用して単一の SASS ファイルを作成し、それを CSS に落とし込む必要がありますか? もしそうなら、変更を確認するためにすべてのファイルを監視するための監視呼び出しを構築するのに、その1つのSASS/CSSファイルのみを構築するのに最適な方法は?

それとも、単一の CSS ファイルを構築するために SASS のインポート機能を使用するだけの「マスター」SASS ファイルを 1 つ用意するのが最善でしょうか? その場合、Grunt を使用してその 1 つのファイルだけをビルドし、すべての SASS ファイルの変更を監視するにはどうすればよいですか?

コンパスを使用して CSS ファイルを縮小していることもここに追加する必要があります。

これが現在の私の Grunt ファイルです。

  module.exports = function (grunt) {

   grunt.initConfig({

    pkg:grunt.file.readJSON('package.json'),

    concat: {
        options: {
          separator: ';'
        },
        dist: {
          src: ['js/*.js'],
          dest: 'assets/built.js'
        }
    },
    compass: {
        dist: { 
            options: {
              sassDir: 'sass',
              cssDir: 'assets',
              environment: 'development',
              outputStyle: 'compressed'
            }
        }
    },
    watch: {
        files:['js/*.js','sass/*.scss'],
        tasks:['concat','compass']  
    }

}); 

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('default',['concat','compass']);
  }

どんなアイデアも大歓迎です

ありがとう

グレン。

4

2 に答える 2

1

パーシャルを利用してみましたか？

http://sass-lang.com/guide

パーシャルを使用し、compass タスクで.scssに基づいて任意の css を作成します。(これはパーシャル _ .scss を除外することに注意してください) これにより、compass.app や scout などの gui を使用しているかのように、追加の面倒な構成タスクを記述する必要なく、連結の問題が処理されます。

うなり声 + コンパス: http://ryanchristiani.com/add-compass-to-your-grunt-task/

于 2014-01-22T23:23:05.067 に答える
1

大丈夫です、私は解決策を思いつきました。コンパス プラグインから SASS に移行しました。上記のように、すべての SCSS ファイルを監視するように grunt に指示し、SASS プラグインを使用して 1 つの css ファイルをビルドするように指示します。

そのようです ：

module.exports = function (grunt) {

grunt.initConfig({

    pkg:grunt.file.readJSON('package.json'),

    concat: {
        options: {},
        dist: {
          src: ['js/*.js'],
          dest: 'assets/master.js'
        }
    },
    sass: {
        dist: { 
            options: {
                style: 'compressed'
            },
            files: {
                'assets/master.css' : 'sass/to_build.scss'
            }
        }
    },
    watch: {
        files:['js/*.js','sass/*.scss'],
        tasks:['concat','sass'] 
    }

}); 

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['concat','sass']);
}

これが他の誰かに役立つことを願っています。

ありがとう

グレン。

于 2013-10-30T15:14:16.977 に答える