gruntインクリメンタルタスク、いくつかのピットに遭遇しました
うん.今日は暇なうちに、プロジェクトの先端に関するものを自動化してツール
css最小化 js圧縮 coffeeコンパイル これらは比較的一般的な機能であり,もちろんcssのプリコンパイルにはless,sassがあり,ここでの原理はcoffee->jsの論理と同様であり,言うまでもない.
package.json
gruntあまり紹介しないでください.インストールもあまり言わないし、googleにもありますプロジェクトに必要な機能
package.json json{
"name": "project_name",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-cssmin": "~0.5.0",
"grunt-contrib-uglify": "~0.8.0",
"grunt-contrib-coffee": "~0.13.0",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-watch": "~0.6.1",
},
"main": "Gruntfile.js",
"author": "zhulegequ",
"license": "MIT"
}
頼りになるバッグは、前の4つは説明しないで、その名の通りです.grunt-contrib-copy:コピーファイル、ファイル数、ここではプロジェクトに画像やフォントファイル、テンプレートファイルなどの他の静的ファイルがあるため、これらのファイルとcss、jsは1つのフォルダに置かれていますが、css、jsは圧縮に伴って移動するので、このパッケージgrunt-contrib-watch:ファイルの修正を監視し、インクリメンタルタスクの鍵
Gruntfile.coffee
gruntはjavascriptもサポートしているし、coffeescriptもサポートしているので、ジグを統一するためにここではcoffeescriptを使用し、coffeescriptはjsにコンパイルされ、多くのコード量を減らし、括弧を心配する必要はありません.私も今日書いたばかりですが、なかなかいいですね.の
ファイルは3つの部分に分けられています.ここの支店は主に機能の分離ですが、コードは必ずしも分離されているわけではありません.インデントに注意してください.
セクション1:基本タスク定義
coffeescriptmodule.exports = (grunt)->
# ， ，
grunt.initConfig
pkg: grunt.file.readJSON('package.json')
cssmin:
comparecss:
files:[
expand:true
cwd:'themes/src/'#
src:'**/*.css'# css
dest: 'themes/dist/'#
]
uglify: # js
comparejs:
files:[
expand:true
cwd:'themes/src/'#
src:'**/*.js'# js
dest: 'themes/dist/'#
]
copy: #
main:
files:[
expand:true
cwd:'themes/src/'#
src:['*.template']#
dest: 'themes/dist/'#
]
coffee:
compile:
options:
bare:true
files:[
expand:true
flatten: true
cwd:'themes/src/coffee'#
src:'*.coffee'# coffee
ext: '.js'
dest: 'themes/src/js'#
]
#
第1部の機能は初期化構成であり、ここではcssmin、uglify、copy、coffeeといういくつかのタスクを基本的に定義している.関連するフラグビットドキュメントは、これらのパケットのgithubホームページを表示することができ、比較的一般的なフラグビットexpandであり、src='folder/src',dest='folder/dest/'の場合、folder/src/a/b/c.jsに転送され、folder/dest/a/b/c.jsに転送されることを示す.
セクション2:タスク定義の監視
はい、この部分は穴でしょうか.計算するかどうか分かりませんが、watchのサンプルドキュメントでは、基礎的な使い方も言及されています.coffeescriptgrunt.initConfig({
watch: {
#
src: {
files: ['lib/*.js', 'css/**/*.scss', '!lib/dontwatch.js'],
tasks: ['default'],
},
},
});
srcの監視タスクを定義し、files変数のファイル変更を監視するときにdefaultタスクを実行することを示します.増分の例も挙げられます.coffeescriptgrunt.initConfig({
jshint: {# jshint
all: {
src: ['lib/*.js'],
},
},
watch: {#
scripts: {
files: ['lib/*.js'],
tasks: ['jshint'],
options: {
spawn: false,
},
},
},
});
grunt.event.on('watch', function(action, filepath,target) {# 3 ，target ， scripts，
grunt.config('jshint.all.src', filepath);
});
監視任務はやはり同じで、spawn標識位の役割はとても呆然としている.デフォルトはtrueですが、効果を試してみてください.このフラグビットは特に重要です.特に重要です!特に重要です!くれぐれも漏らさないでください.漏らすと全量更新の役割を果たします.
ここでインクリメンタルを監視する役割を果たすのは、登録されたこのイベントコールバックが実際にgrunt.に等しいことである.config.set('jshint.all.src',filepath)、泣きそうになりました.
次は私の監視タスクの定義ですcoffeescript#
watch:
coffeescript:
files:['themes/src/coffee/*.coffee']
tasks:'coffee'
# options: #
# spawn: false
jsuglify:
files:['themes/src/**/*.js']
tasks:'uglify'
options:
spawn: false
cssminify:
files:['themes/src/**/*.css']
tasks:'cssmin'
options:
spawn: false
# grunt.initConfig
grunt.loadNpmTasks('grunt-contrib-cssmin')
grunt.loadNpmTasks('grunt-contrib-uglify')
grunt.loadNpmTasks('grunt-contrib-coffee')
grunt.loadNpmTasks('grunt-contrib-watch')
私のここのcoffeescriptのspawnが私に注釈されたことに気づいて、ここは私に少し穴をあけて、このようにcoffeescriptの更新を意味して、全量の更新で、1つのファイルは修正して、すべてのファイルはすべて再びコンパイルして、どうしてこのようにしますか、coffeescript->javascript->javascriptがあるためですminこのプロセスは、ここでspawnをfalseにすると、後ろの半分がなくなります.の技術的に制限されているのは、coffeescript->javascript t.minの過程、ぜひ教えてください.の
第3部：同期削除
役割:jsソースファイルを削除するときに、生成するjsをmin削除、css同理coffeescript deleteDist=(srcfilepath,distpath,sourcepath)->
distfile = distpath+srcfilepath.substring(sourcepath.length)
if grunt.file.exists(distfile)
grunt.file.delete(distfile)
grunt.event.on 'watch', (action, filepath,target) ->
console.log action, filepath,target
if target=="jsuglify"
if action == "deleted" or action=="renamed"
deleteDist(filepath,'themes/dist/','themes/src/')
if action=="deleted"
return
grunt.config 'uglify.comparejs.files',
[
expand:true
cwd:'themes/src/'#
src:filepath.substring(11)# themes/src/ 11
dest: 'themes/dist/'#
]
console.log 'uglify detach',filepath,action
return
else if target=="coffeescript"
grunt.config "coffee.compile.files",# ,
[
expand:true
flatten: true
cwd:'themes/src/coffee'#
src:filepath.substring(18)#
ext: '.js'
dest: 'themes/src/js'#
]
console.log 'coffeescript detach',filepath,action
return
else if target=="cssminify"
if action == "deleted" or action=="renamed"
deleteDist(filepath,'themes/dist/','themes/src/')
if action=="deleted"
return
console.log 'cssminify detach',filepath,action
grunt.config.set "cssmin.comparecss.files",# ,
[
expand:true
cwd:'themes/src/'#
src:filepath.substring(11)# css
dest: 'themes/dist/'#
]
return
grunt.registerTask 'default', ['watch']
return
この第2部では、大体の原理は修正を検出する时、タスクの配置を修正されたファイルの経路に変更して、それから终わって、gruntは后で事件が泡を立てて、タスクを実行して、みんなはコードを见て悟ればいいのははははは、削除検査はファイル名を検出して、syncライブラリを使っていないで、名前を変更する时、実际に2回の事件が発生して、1回deleted古いファイル、1回renamed新しいファイル、だから名前を変更するときは、古いファイルのコンパイルの結果を削除し、泡を立てて、新しいファイルを生産し続ける必要があります.削除するときに古いファイルを直接削除してコンパイルした結果、醜いのはsrc:filepath.substring(18)という文です.filepathのパラメータは全パスでcwdが含まれているので、cwd変数と等長+1つの'/'の長さを削除します.恩deleteDistこの関数も正則を使わず、=w=就醤..
その他の穴
coffeeの関数呼び出しに注意して、関数+スペース+カンマで区切られたパラメータたちは、カンマがなくなったことは関数パラメータが終わることを意味するので、console.log "hi","123"とconsole.log "hi" "123"は明らかに等しくなく、スペースを車に戻すのも似ています.
json{
"name": "project_name",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-cssmin": "~0.5.0",
"grunt-contrib-uglify": "~0.8.0",
"grunt-contrib-coffee": "~0.13.0",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-watch": "~0.6.1",
},
"main": "Gruntfile.js",
"author": "zhulegequ",
"license": "MIT"
}
gruntはjavascriptもサポートしているし、coffeescriptもサポートしているので、ジグを統一するためにここではcoffeescriptを使用し、coffeescriptはjsにコンパイルされ、多くのコード量を減らし、括弧を心配する必要はありません.私も今日書いたばかりですが、なかなかいいですね.の
ファイルは3つの部分に分けられています.ここの支店は主に機能の分離ですが、コードは必ずしも分離されているわけではありません.インデントに注意してください.
セクション1:基本タスク定義
coffeescriptmodule.exports = (grunt)-> # ， ， grunt.initConfig pkg: grunt.file.readJSON('package.json') cssmin: comparecss: files:[ expand:true cwd:'themes/src/'# src:'**/*.css'# css dest: 'themes/dist/'# ] uglify: # js comparejs: files:[ expand:true cwd:'themes/src/'# src:'**/*.js'# js dest: 'themes/dist/'# ] copy: # main: files:[ expand:true cwd:'themes/src/'# src:['*.template']# dest: 'themes/dist/'# ] coffee: compile: options: bare:true files:[ expand:true flatten: true cwd:'themes/src/coffee'# src:'*.coffee'# coffee ext: '.js' dest: 'themes/src/js'# ] #
第1部の機能は初期化構成であり、ここではcssmin、uglify、copy、coffeeといういくつかのタスクを基本的に定義している.関連するフラグビットドキュメントは、これらのパケットのgithubホームページを表示することができ、比較的一般的なフラグビット
expandであり、src='folder/src',dest='folder/dest/'の場合、folder/src/a/b/c.jsに転送され、folder/dest/a/b/c.jsに転送されることを示す.セクション2:タスク定義の監視
はい、この部分は穴でしょうか.計算するかどうか分かりませんが、watchのサンプルドキュメントでは、基礎的な使い方も言及されています.
coffeescriptgrunt.initConfig({ watch: { # src: { files: ['lib/*.js', 'css/**/*.scss', '!lib/dontwatch.js'], tasks: ['default'], }, }, });
srcの監視タスクを定義し、files変数のファイル変更を監視するときにdefaultタスクを実行することを示します.増分の例も挙げられます.
coffeescriptgrunt.initConfig({ jshint: {# jshint all: { src: ['lib/*.js'], }, }, watch: {# scripts: { files: ['lib/*.js'], tasks: ['jshint'], options: { spawn: false, }, }, }, }); grunt.event.on('watch', function(action, filepath,target) {# 3 ，target ， scripts， grunt.config('jshint.all.src', filepath); });
監視任務はやはり同じで、
spawn標識位の役割はとても呆然としている.デフォルトはtrueですが、効果を試してみてください.このフラグビットは特に重要です.特に重要です!特に重要です!くれぐれも漏らさないでください.漏らすと全量更新の役割を果たします.ここでインクリメンタルを監視する役割を果たすのは、登録されたこのイベントコールバックが実際にgrunt.に等しいことである.config.set('jshint.all.src',filepath)、泣きそうになりました.
次は私の監視タスクの定義です
coffeescript# watch: coffeescript: files:['themes/src/coffee/*.coffee'] tasks:'coffee' # options: # # spawn: false jsuglify: files:['themes/src/**/*.js'] tasks:'uglify' options: spawn: false cssminify: files:['themes/src/**/*.css'] tasks:'cssmin' options: spawn: false # grunt.initConfig grunt.loadNpmTasks('grunt-contrib-cssmin') grunt.loadNpmTasks('grunt-contrib-uglify') grunt.loadNpmTasks('grunt-contrib-coffee') grunt.loadNpmTasks('grunt-contrib-watch')
私のここのcoffeescriptのspawnが私に注釈されたことに気づいて、ここは私に少し穴をあけて、このようにcoffeescriptの更新を意味して、全量の更新で、1つのファイルは修正して、すべてのファイルはすべて再びコンパイルして、どうしてこのようにしますか、coffeescript->javascript->javascriptがあるためですminこのプロセスは、ここでspawnをfalseにすると、後ろの半分がなくなります.の技術的に制限されているのは、coffeescript->javascript t.minの過程、ぜひ教えてください.の
第3部：同期削除
役割:jsソースファイルを削除するときに、生成するjsをmin削除、css同理
coffeescriptdeleteDist=(srcfilepath,distpath,sourcepath)-> distfile = distpath+srcfilepath.substring(sourcepath.length) if grunt.file.exists(distfile) grunt.file.delete(distfile) grunt.event.on 'watch', (action, filepath,target) -> console.log action, filepath,target if target=="jsuglify" if action == "deleted" or action=="renamed" deleteDist(filepath,'themes/dist/','themes/src/') if action=="deleted" return grunt.config 'uglify.comparejs.files', [ expand:true cwd:'themes/src/'# src:filepath.substring(11)# themes/src/ 11 dest: 'themes/dist/'# ] console.log 'uglify detach',filepath,action return else if target=="coffeescript" grunt.config "coffee.compile.files",# , [ expand:true flatten: true cwd:'themes/src/coffee'# src:filepath.substring(18)# ext: '.js' dest: 'themes/src/js'# ] console.log 'coffeescript detach',filepath,action return else if target=="cssminify" if action == "deleted" or action=="renamed" deleteDist(filepath,'themes/dist/','themes/src/') if action=="deleted" return console.log 'cssminify detach',filepath,action grunt.config.set "cssmin.comparecss.files",# , [ expand:true cwd:'themes/src/'# src:filepath.substring(11)# css dest: 'themes/dist/'# ] return grunt.registerTask 'default', ['watch'] return
この第2部では、大体の原理は修正を検出する时、タスクの配置を修正されたファイルの経路に変更して、それから终わって、gruntは后で事件が泡を立てて、タスクを実行して、みんなはコードを见て悟ればいいのははははは、削除検査はファイル名を検出して、syncライブラリを使っていないで、名前を変更する时、実际に2回の事件が発生して、1回
deleted古いファイル、1回renamed新しいファイル、だから名前を変更するときは、古いファイルのコンパイルの結果を削除し、泡を立てて、新しいファイルを生産し続ける必要があります.削除するときに古いファイルを直接削除してコンパイルした結果、醜いのはsrc:filepath.substring(18)という文です.filepathのパラメータは全パスでcwdが含まれているので、cwd変数と等長+1つの'/'の長さを削除します.恩deleteDistこの関数も正則を使わず、=w=就醤..