Guntfile.js配置の全攻略

2967 ワード

一般的には、設定ファイルとしてテンプレートを直接使用します.
module.exports = function(grunt) { "use strict"; grunt.initConfig({ //       }); //      ,         grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-p_w_picpathmin'); //      grunt.registerTask('default', ['cssmin', 'p_w_picpathmin', 'uglify']); };
grunt.loadNpmTasks()はプラグインをロードするタスクである.つまり、どのプラグインの機能を使うかというと、この部分にこのコードを使ってプラグインのタスクを追加してください.grunt.registerTask()は登録タスクで、デフォルトではdefaultがあります.デフォルトの意味は、あなたが最後に使ったとき、ディレクトリのコマンドプロンプトに直接入力してgruntを実行することができます.これはdefaultのタスクを実行することに相当します.
カスタムタスクを使う
より多くのタスクコマンドを登録して、他の名前を使うことができます.たとえば
grunt.registerTask('custom', ['cssmin', 'p_w_picpathmin']);
使用に応じて、入力:
grunt custom
gruntfile.jsの例は以下の通りです.
module.export=function{
    'use strick';
    grunt.init Config({
        less:{
         //開発環境
          development:{
            options:{
              paths:[css] //@importファイルをロードするパス
            },
            files:{
              「css/style.css」:「css/style.less」 //path/to/source.lessをpath/to/result.cssにコンパイルします.
            }
          },
         //オンライン環境
          プロデュース:{
            options:{
              paths:[[css] //@importファイルをロードするパス
              cleancss:true   //cssファイルを圧縮する
              modifyVars:{ //グローバル変数を再定義
                imgPath:''http://mycdn.com/path/to/p_w_picpaths「」
                bgColor:'red'
              }
            },
            files:{
              「css/style.css」:「css/style.less」
            }
          }
        },
        concat:{
            css:{
                src:['css/*.css']
                dest:'css/asset/all.css'
            }
        },
        cssmin:{
            css:{
                src:'css/asset/all.css'
                dest:'css/asset/all-min.css'
            }
        },
        //すべてのファイルを圧縮
           cssminAll:{
            css:{
                expand:true、
               //相対パス
                cwd:'css/'
                src:'*.css'
                dest:'css/asset'
            }
    });
    grunt.loadNpmTass('grunt-contrib-less')
   //開発環境
    grunt.register Task(''lessDev',''less:development');
   //オンライン環境
    grunt.register Task;
    grunt.loadNpmTass('grunt-contrib-concat')
    grunt.loadNpmTass('grunt-contrib-cssmin')
   //デフォルトのタスク
    grunt.register Task('default'、['concat'、'cssmin')