Guntfile.js配置の全攻略
2967 ワード
一般的には、設定ファイルとしてテンプレートを直接使用します.
カスタムタスクを使う
より多くのタスクコマンドを登録して、他の名前を使うことができます.たとえば
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')
}
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')
}