0

現時点では、Autoprefixer、mqpacker、および cssnano を実行する Post CSS を使用して Gruntfile.js をセットアップしています。

デプロイ用のすべてをビルドするために機能するデフォルトの grunt ビルドがあります。次のように、postcss への呼び出しが含まれます。

grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);

問題は、デフォルトの grunt ビルド プロセスを毎日の開発作業用にしたいことです。メディア クエリのコンパイルと Post CSS からの縮小を省略 (オフ) します。

ただし、オートプレフィクサーをオンのままにしたいです。autoprefixer が別のプログラムとして実行されていた場合、これは grunt の問題ではありませんでした。grunt.registerTask

autoprefixer が Post CSS 内で実行されるようになったので、これらの異なるビルド プロセスを、CSS の個々のプラグインをコメント アウトする (ぎこちない) ことなく、別のビルドを実行するたびに再起動することなく機能させるにはどうすればよいでしょうか?

私のグラントファイル：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({

    // Sass to CSS
    sass: {

      app: {

        files: [{
          expand: true,
          cwd: 'scss',
          src: ['**/*.scss'],
          dest: 'css/src',
          ext: '.css'
        }]

      },

      options: {
        sourceMap: true,
        outputStyle: 'expanded',
        imagePath: "../"
      }

    },


    // Post CSS (autoprefixer, mqpacker, cssnano)
    postcss: {

        // Configuration
        options: {

            map: true,

            // Load plugins  
            processors: [

                // Runs Post CSS Autoprefixer
                require('autoprefixer')({browsers: ['last 2 versions']}),

                // require('postcss-import')(),

                require('css-mqpacker')(),

                require('cssnano')({
                  autoprefixer: false, 
                  safe: true,
                  sourcemap: false
                })
            ]

        },

        // Operate on compiled Sass, write global.css
        dist: {
            src: 'css/src/global-sass.css',
            dest: 'css/global.min.css'

        }

    },

    // JS Concatenation Plugin
    concat: {

        dist: {
            src: [
                'js/libs/*.js',  // All JS in the libs folder
                'js/src/*.js'   // All JS in the src folder
            ],

            dest: 'js/scripts.js'
        }
    },


    // JS Minification
    uglify: {

        build: {

            src: 'js/scripts.js',

            dest: 'js/scripts.min.js'
        }
    },

    // Image Minification -- run on demand w/ `grunt imagemin`
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'img/src/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'img/'
                }]
            }
        },


    // BrowserSync
    browserSync: {

      dev: {

          bsFiles: {

              src : [
                  'css/*.css',
                  '**/*.{html}'
              ]

          },

          options: {
              watchTask: true,
              server: './'
          }
      }
    },


    // Watch
    watch: {

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

      js: {
        files: ['js/src/*.js'],
        tasks: ['concat', 'uglify']
      },

      options: {
        livereload: false,
        spawn: false
      }

    },

  });

  // Loads Grunt Tasks
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');


  // Default Task
  grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);

};
4

1 に答える 1

2

それらをサブタスクに分割して、登録された異なるタスクで個別に呼び出すことができるようにします。

// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {

  prefix: {
    options: {
      map: true,
      // Load plugins  
      processors: [
        require('autoprefixer')({browsers: ['last 2 versions']})
      ]
    }
    dist: {
      src: 'css/src/global-sass.css',
      dest: 'css/global.min.css'
    }
  },

  pack: {
    options: {
      map: true,
      // Load plugins  
      processors: [
        require('css-mqpacker')()
      ]
    }
    dist: {
      src: 'css/src/global-sass.css',
      dest: 'css/global.min.css'
    }
  },

  nano: {
    options: {
      map: true,
      // Load plugins  
      processors: [
        require('cssnano')({
          autoprefixer: false, 
          safe: true,
          sourcemap: false
        })
      ]
    }
    dist: {
      src: 'css/src/global-sass.css',
      dest: 'css/global.min.css'
    }
  }
}

その後

grunt.registerTask('default', ['sass', 'postcss:prefix', 'postcss:pack', 'postcss:nano', 'concat', 'uglify', 'browserSync', 'watch']);

またはあなたのプロジェクトに合った方法で。それが役に立てば幸い

于 2015-12-29T14:26:54.460 に答える