0

次の Gruntfile を見て、cssnano と autoprefixer が実行されていない理由を特定できるかどうかを確認していただけますか?

Grunt は現在私のプロジェクトを監視しており、保存するたびに正常にgrunt-sassコンパイルされますが、どちらもgrunt-cssnano実行autoprefixerされておらず、エラーも報告されていません。

エラーなしで完了。2015 年 11 月 25 日水曜日 13:12:18 GMT+0000 (GMT 標準時) に 1.906 秒で完了 - 待機中...

ファイル「sass\styles.scss」が変更されました。「sass:dist」(sass) タスクの実行

セットアップ (特に css 部分)で何か間違ったことをしgrunt-contrib-watchたと思いますが、それは単なる推測です。

私のプロジェクトフォルダは次のようになります

  • 距離
    • CSS
      • スタイル.css
  • node_modules (関連するすべてのパッケージを含む)
  • サス
    • スタイル.css
  • Gruntfile.js
  • パッケージ.json

そして、私のGruntfileは次のとおりです

module.exports = function (grunt) {

    grunt.initConfig({

        sass: {
            options: {
                sourceMap: false
            },
            dist: {
                files: {
                    'dist/css/styles.css': 'sass/styles.scss'
                }
            }
        },

        postcss: {
            options: {
                map: {
                    inline: false,
                    annotation: 'dist/css/maps/'
                },
                processors: [
                    require('autoprefixer')({
                        browsers: 'last 2 versions'
                    }),
                    require('cssnano')()
                ]
            },
            dist: {
                src: 'dist/css/styles.css'
            }
        },

        watch: {
            sass: {
                files: 'sass/*.scss',
                tasks: ['sass']
            },
            css: {
                files: 'dist/css/styles.css',
                tasks: ['cssnano', 'autoprefixer']
            }
        },
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-cssnano');    

    grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano', 'autoprefixer']);
};
4

2 に答える 2

1

あなたのようにタスクを登録する：

grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano']);

タスクを 1 つずつ実行します。したがって、あなたの場合、watch完了するまで「決して終了しない」ため、タスクのみが実行されます。だからsass, postcss:dist, cssnano届かない。

したがって、あなたの場合、監視タスクのみを実行します。これは、* .scss ファイルを監視して sass タスクを実行し、style.css を監視してcssnanoandautoprefixerタスクを実行します。しかし、これらの最後の 2 つのタスクは構成で定義されていないため、何も実行されません。

問題を解決するには、使用されていないため、デフォルトの登録済みタスクからタスクを削除します。

grunt.registerTask('default', ['watch']);

そして、不足しているタスクごとに構成を追加します。例えば：

cssnano: {
        options: {
            sourcemap: true
        },
        dist: {
            files: {
                'dist/css/styles.min.css': 'dist/css/styles.css'
            }
        }
    },
//and same for autoprefixer
于 2015-11-25T13:43:51.140 に答える
0

さらに多くの試行錯誤を重ねると、解決策があるように見えます。以下のファイルは、Sass、cssnano、autoprefix、watch を実行するようになりました。Sass、cssnano、および autoprefix パケット (および、将来追加される他のパケットもあると思います) はgrunt.initConfig、ファイルの最後でそのregisterTask処理を実行し、監視を行います。

他の registerTasks を作成する方法を理解するには、さらに作業が必要ですが、それはまた別の機会にします。

私を正しい軌道に乗せてくれたミアンに感謝します。

module.exports = 関数 (うなり声) {

grunt.initConfig({
    sass: {
        options: {
            sourceMap: false
        },
        dist: {
            files: {
                'dist/css/styles.css': 'sass/styles.scss'
            }
        }
    },

    postcss: {
        options: {
            map: {
                inline: false,
                annotation: 'dist/css/maps/'
            },
            processors: [
                require('autoprefixer')({
                    browsers: 'last 2 versions'
                }),
                require('cssnano')()
            ]
        },
        dist: {                
            src: 'dist/css/styles.css'
        }
    },

    watch: {
        sass: {
            files: 'sass/*.scss',
            tasks: ['sass', 'postcss']
        },
    },
});

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');    

grunt.registerTask('default', ['watch']);

};

于 2015-11-25T22:16:47.937 に答える