Grunt.jsの紹介スライドです。package.jsonの扱いや、grunt自身の0.4.0対応が弱い部分が残りますが、数ヶ月前というところでご容赦くだされば、おおまかな概要を示しています。
Ϗϧυϓϩηεͷ1ࣗಈԽͰޮΞοϓ(SVOUKTΛར༻ͨࣗ͠ಈԽ!BIPNV
View Slide
ࣗݾհ͞ͱ͏͋ΏΉ !BIPNVαΠόʔΤʔδΣϯτϚʔΫΞοϓΤϯδχΞͰ໊͢ݹग़͕ͩͶৄ͘͠IUUQBIPNV2
࣍ Ϗϧυϓϩηεͱࠇ͍ը໘ (SVOUKT ઃఆϑΝΠϧͱ͍ํ ϓϥάΠϯͷհͱࣗ࡞ ·ͱΊ3
Ϗϧυϓϩηεͱࠇ͍ը໘4
Ϗϧυϓϩηεʁ5
͞·͟·ͳϏϧυ6$44ϓϦϓϩηοα$PNQJMF$PGGFF4DSJQUͳͲBMU+4ͷ$PNQJMFϑΝΠϧͷ݁߹$PODBUFOBUFը૾ͷϩεϨεѹॖ$PNQSFTTJPO%BUB63*ม*OMJOF&NCFEίʔυ࠷খԽ.JOJGZ0QUJNJ[F
खஈɾత૿͑Δ͔Γࠓ͜͜·Ͱհ͞Εͨ༰͚ͩͰɺଟ͘ͷ࡞ۀΛٻΊΒΕ͍ͯΔ7
7υΩϡϝϯτੜΩϟογϡϚχϑΣετཧ+BWB4DSJQUͷςετ࣮ߦڥʹϑΝΠϧΞοϓϩʔυ$44ϓϦϓϩηοα$PNQJMF$PGGFF4DSJQUͳͲBMU+4ͷ$PNQJMFϑΝΠϧͷ݁߹$PODBUFOBUFը૾ͷϩεϨεѹॖ$PNQSFTTJPO%BUB63*ม*OMJOF&NCFEίʔυ࠷খԽ.JOJGZ0QUJNJ[F
ΞϨίϨ·ͱΊͯࣗಈԽ͍ͨ͠ࢄͨ͠࡞ۀͱखؒΛͻͱ·ͱΊʹ͢Δ8
ͳͥࣗಈԽͳͷ͔ʁ9
܁Γฦ͠ΛݮΒ͍ͨ͠10 ώϡʔϚϯΤϥʔΛ܁Γฦͨ͘͠ͳ͍ खಈίϯύΠϧΛ܁Γฦͨ͘͠ͳ͍ $44Ͱಉ͡هड़Λ܁Γฦͨ͘͠ͳ͍ )551ϦΫΤετΛ܁Γฦͨ͘͠ͳ͍
ͯ͢܁Γฦ͠ͷ࠷దԽ%PO`U3FQBU:PVSTFMG11
ࣗಈԽʹΑͬͯੜ·ΕΔ͕࣌ؒେͷલͷ࡞ۀΛ࠷దԽ͢Δ͜ͱͰຊʹඞཁͳ͜ͱʹ࣌ؒΛ͔ͭ͏͜ͱ͕Ͱ͖Δ12
ͳͥࠇ͍ը໘ͳͷ͔ʁ13
'PS6TJOH7BMVJOH5PPMT14 Ձ͋Δπʔϧɺ͡Ί$-*πʔϧ (6*πʔϧʹͳΔͷɺ΄ΜͷҰѲΓ $-*πʔϧɺҰॠͰେͳࣄΛ͢Δ ͍͜ͳͤ࠷ޮԽͰ͖Δखஈ ͍ͬͯΕɺͦΕ͚ͩͰثʹͳΔ
ւͷ͜͏ͷτϨϯυײ15
5IF$PNNBOE-JOFίϚϯυϥΠϯར༻ͷඞཁੑ͕͘ೝ͞Ε࢝Ί͍ͯΔ16
ࠇ͍ը໘ඞܞ͕࣌ɺ͘Δ͔͠Εͳ͍17
ࠇ͍ը໘͔ͬ͜Α͘ͳΔʂ18
·ͣઃఆΛ։͘ͱ͜Ζ͔Β19
'PS8JOEPXT $ZHXJO ͍·͙͢ίϚϯυϓϩϯϓτΛࣺͯͯɺ$ZHXJOΛ͏͖̍̌ͷཧ༝ (FUUJOHHSVOUUPXPSLPOXJOEPXTXJUIDZHXJOBOEHJU20
(SVOUKT21
OPEF+4Ͱಈ͘ϏϧυπʔϧϏϧυϓϩηεͷࣗಈԽɾҰݩԽͷ΄͔ʹɺϩʔΧϧ։ൃڥͷߏஙͳͲ22
5BTL#BTFE#VJME5PPM23OPEF+4(SVOU5BTL 5BTL 5BTL
5BTL#BTFE#VJME5PPM23OPEF+4(SVOU5BTL 5BTL 5BTLϓϥάΠϯ෦
5BTL#BTFE#VJME5PPM23OPEF+4(SVOU5BTL 5BTL 5BTLίϚϯυϥΠϯͰ࣮ߦ5BTLͷ࣮ߦ݁ՌΛಘΔ‣֤छίϯύΠϧͷ࣮ߦ‣ॲཧࡁΈϑΝΠϧͷ࡞‣ͳͲͳͲ
(SVOUKTͷಛ IUUQHSVOUKTDPN ઃఆϓϥάΠϯͯ͢+BWB4DSJQU ઃఆ෦ͷ+4؆ܿʹهड़Ͱ͖Δ ϓϥάΠϯ͕ଟެ։͞Ε͍ͯΔ ΤσΟλʹґଘͤͣར༻Ͱ͖Δ ઃఆϑΝΠϧ͕͋Ε؆୯ʹڥڞ༗Ͱ͖Δ24
։ൃΞΫςΟϏςΟ TUBCMFEFWFMPQB ඇৗʹΜʹߋ৽͞Ε͍ͯΔ ։ൃίϛϡχςΟ͕͕͍ͬͯΔ K2VFSZͷϏϧυπʔϧͱͯ͠࠾༻25
Πϯετʔϧํ๏εςοϓͰ͙͢Ͱ͖·͢26
OPEF+4ͷΠϯετʔϥʔ27
ΠϯετʔϥʔΛ࣮ߦ28
(SVOUKTΛΠϯετʔϧ29npm install -g grunt
͜ΕͰ४උ0,30
ઃఆϑΝΠϧͱ͍ํ31
࡞ϑΝΠϧHSVOUKTQBDLBHFKTPO
σϞϑΝΠϧެ։தIUUQTHJUIVCDPNBIPNVGSPOUSFOEHSVOUEFNP33
HSVOUKT34ϝΠϯͷઃఆϑΝΠϧ
ϑΝΠϧͷ݁߹35
+4ͱ$44ͷ݁߹ઃఆ36grunt.initConfig({concat: {js: {src: ['js/lib/jquery.js','js/app/main.js','js/app/sub.js'],dest: 'js/all.js'},css: {src: ['css/main.css', 'css/sub.css'],dest: 'css/all.css'}},}HSVOUKT
+BWB4DSJQUͷϏϧυ37
+BWB4DSJQUͷϏϧυઃఆmodule.exports = function(grunt) {grunt.initConfig({concat: {dist: {src: ['js/jquery.js', 'js/app/main.js', 'js/app/sub.js'],dest: 'js/all.js'}},min: {dist: {src: 'js/all.js',dest: 'js/all.min.js'}}});grunt.registerTask('jsbuild', ['concat', 'min']);};38HSVOUKT
39λεΫΛෳ߹ͯ͠ࢦఆ// Alias Task// grunt.registerTask(taskName, taskList)grunt.registerTask('jsbuild', ['concat', 'min']);concat + min = jsbuildHSVOUKT
40AHSVOUKTCVJMEAͷ࣮ߦ݁Ռ% grunt jsbuild# concat λεΫ͕ߦΘΕͯɺjs/all.js ͕ੜ͞ΕͨRunning "concat:dist" (concat) taskFile "js/all.js" created.# ͞Βʹ min λεΫͰɺѹॖ͕ߦΘΕͨRunning "min:dist" (min) taskFile "js/all.min.js" created.Uncompressed size: 56545 bytes.Compressed size:# ͓͠·͍Done, without errors.ࠇ͍ը໘
41ϑΝΠϧͷߋ৽ݕ
ϑΝΠϧͷߋ৽ݕͱΞΫγϣϯwatch: {css: {// ͜ΕΒͷϑΝΠϧ͕ߋ৽͞ΕͨΒfiles: ['css/*.less'],// ҎԼͷλεΫΛ࣮ߦ͢Δtasks: 'less'},js: {files: ['js/app/*.js', 'index.html'],tasks: 'lint concat min'}}42HSVOUKT
43AHSVOUXBUDIAͷ࣮ߦ݁Ռ% grunt watch# ϑΝΠϧͷߋ৽ࢹΛ։࢝Running "watch" taskWaiting...OK# ݕʂFile "css/main.less" changed.# lessλεΫ͕࣮ߦ͞ΕͯɺίϯύΠϧRunning "less:dist" (less) taskFile css/main.css created.ࠇ͍ը໘
44ϩʔΧϧ։ൃڥ
45։ൃڥͱͯ͠Έ߹Θͤͨઃఆgrunt.initConfig({/*ʢલུɾ͜Ε·Ͱͷwatch֤λεΫͷઃఆʣ*/server: {port: 8000, // ੩తϩʔΧϧαʔόΛཱͯΔϙʔτbase: '.'},reload: {port: 35729 // LiveReloadαʔόͷϙʔτ},});// develop λεΫͱͯ͠ෳ߹grunt.registerTask('develop', ['server', 'reload', 'watch']);HSVOUKT
46AHSVOUXBUDIAͷ࣮ߦ݁Ռ% grunt devlop# localhost:8000ΛىಈRunning "server" taskStarting static web server on port 8000.# LiveReloadαʔόʔΛىಈRunning "reload" taskProxying http://localhost:8000/reload server running at http://localhost:35729# ϑΝΠϧͷߋ৽Λ։࢝Running "watch" taskWaiting..ࠇ͍ը໘
ϓϥάΠϯͷಋೖ47OQNΛར༻ͯ͠Πϯετʔϧ͢Δ
OQNͬͯʁ48
/PEF1BDLBHF.BOBHFS49 OPEFͰಈ͘ύοέʔδ͕ଟొ͞Ε͍ͯΔ OQNίϚϯυΛ௨ͯ͠ར༻Ͱ͖Δ 3VCZͰ͍͏HFNͱ͔ͷΠϝʔδ
ͷϓϥάΠϯݱࡏOQNʹ͓͍ͯAHSVOUQMVHJOAλά͕͍ͭͨύοέʔδͷ50
͜ΕεςοϓͰ͙͢Ͱ͖Δ51ϓϥάΠϯͷར༻ํ๏
HSVOUKTDPNͰݕࡧ52
ϓϥάΠϯΛΠϯετʔϧ53# ݟ͚ͭͨϓϥάΠϯΛnpmͰΠϯετʔϧ% npm install grunt-data-urinpm http GET https://registry.npmjs.org/grunt-data-urinpm http 200 https://registry.npmjs.org/grunt-data-urinpm http GET https://registry.npmjs.org/mimenpm http 200 https://registry.npmjs.org/mime[email protected] node_modules/grunt-data-uri!"" [email protected]ࠇ͍ը໘
ϓϥάΠϯΛϩʔυ// grunt.loadNpmTasks(packageName)grunt.loadNpmTasks('grunt-data-uri');// ͦͷλεΫͷઃఆΛॻ͖ͤokgrunt.initConfig({dataUri: {dist: {src: ['css/raw/*.css'],dest: 'css'}}});54HSVOUKT
QBDLBHFKTPO55ڥͷڞ༗
56 QBLDBHFKTPOΛ࡞ QBLDBHFKTPOʹอଘ ઃఆϑΝΠϧΛڞ༗͢ΔQBLDBHFKTPO͔Β෮ݩ
// ͜ΜͳJSONΛίϐϖͯ͠ϑΝΠϧ࡞{"name": "ABCϓϩδΣΫτ","description": "ϓϩδΣΫτ։ൃڥͷఆٛͰ͢","version": "1.0.0","author": "࠽ɹଠ","main": "grunt.js","dependencies": {},"optionalDependencies": {"grunt": "~0.3.16"}}57QBDLBHFKTPOΛ࡞QBDLBHFKTPO
QBDLBHFKTPOʹอଘ# install --saveͰ# ϓϥάΠϯͷΠϯετʔϧ࣌ʹɺpackage.jsonͷґଘఆٛʹՃ% npm install --save grunt-xxxxx# remove --saveͰ# ΞϯΠϯετʔϧͱಉ࣌ʹɺpackage.jsonͷґଘఆ͔ٛΒআ% npm remove --save grunt-xxxxx58ࠇ͍ը໘
ઃఆϑΝΠϧΛڞ༗͢Δ HSVOUKT QBDLBHFKTPO ϑΝΠϧ͋Ε0,59
QBDLBHFKTPO͔Β෮ݩ# package.json͕͋ΔσΟϨΫτϦͰ࣮ߦ͢Δͱ# ه͞Ε͍ͯΔϓϥάΠϯΛɺͦͷʹࣗಈͰ෮ݩ(Πϯετʔϧ)͢Δ% npm link60ࠇ͍ը໘
͜͜·Ͱ͕ઃఆํ๏ HSVOUKTࣗମ+BWB4DSJQUͱ͍͏ΑΓɹɹɹɹɹɹ͘͘͝͝؆୯ͳઃఆϑΝΠϧ QBDLBHFKTPOΛ͏·͘͏ͱɹɹɹɹɹɹɹڥڞ༗͕͘͢͠ɺϙʔλϏϦςΟྑ͍ ࣍ϓϥάΠϯͷհ61
ϓϥάΠϯͷհͱࣗ࡞62
ϓϥάΠϯͷհ63େ(JU)VCʹϦϙδτϦ͕͋ΔͷͰ3&"%.&ΛಡΊ͔ΔΑ͏ʹͳ͍ͬͯΔ
ϏϧτΠϯλεΫ64 DPODBUςΩετϑΝΠϧͷ݁߹ NJO+BWB4DSJQUͷ.JOJGZ TFSWFSϩʔΧϧαʔόʔ XBUDIϑΝΠϧͷߋ৽ݕ ͳͲͳͲ
HSVOUDPOUSJC IUUQTHJUIVCDPNHSVOUKTHSVOUDPOUSJC ΦϑΟγϟϧཧ͞Ε͍ͯΔ٧Ί߹Θͤ ެࣜϝϯςφϯε͞Ε͍ͯΔͷͰࢀߟʹͳΔ CVNQɾDMFBOɾDPGGFFɾDPNQSFTTɹɹɹDPQZɾIBOEMFCBSTɾKBEFɾKTUɾMFTTɹNJODTTɾTUZMVTɾZVJEPD65
HSVOUDPNQBTT IUUQTHJUIVCDPNLBIMJMHSVOUDPNQBTT $PNQBTTΛ(SVOU͔Βར༻͢Δ $44ϓϦϓϩηοαܥ֤छ͋Δ˞ -&44HSVOUDPOUSJCMFTT˞ 4UZMVTHSVOUDPOUSJCTUZMVT66
HSVOUJNH IUUQTHJUIVCDPNIFMESHSVOUJNH ը૾ϦιʔεͷϩεϨεѹॖ ACSFXJOTUBMMPQUJQOHKQFHA͕ඞཁ ߴѹॖઃఆͰ*NBHF0QUJNͱಉ͘͡Β͍ BIPNVHSVOUJNH KQFHѹॖߴΊͨ൛67
HSVOUDTTP IUUQTHJUIVCDPNULHSVOUDTTP $44ϑΝΠϧͷ.JOJGZ ѹॖʹ༏Εͨ$440ͱ͍͏ϥΠϒϥϦ BVUIPS!UL˞ $440ͱHSVOUDTTP].0-68
HSVOUEBUBVSJ IUUQTHJUIVCDPNBIPNVHSVOUEBUBVSJ $44ͷը૾ύεΛ%BUB63*ʹࣗಈม VSM QBUIUPJNHΛରʹͯ͠ஔ BVUIPS!BIPNV˞ σʔλ63*εΩʔϜ].0-69
HSVOUSFMPBE IUUQTHJUIVCDPNXFCYMHSVOUSFMPBE ϒϥβͷࣗಈϦϩʔυ ͍ΘΏΔ-JWF3FMPBEͷ࣮ -JWF3FMPBEͷ$ISPNF֦ுͱซ༻Ͱ͖Δ˞ લग़ͷ%&.0Ͱར༻͍ͯͨ͠ͷ70
HSVOUGUQEFQMPZ IUUQTHJUIVCDPN[POBLHSVOUGUQEFQMPZ '51Λར༻ͨ͠ϑΝΠϧͷΓऔΓ ؆қͳσϓϩΠϓϩηεʹͳΔϓϥάΠϯ˞ )FSPLVHSVOUIFSPLVEFQMPZ˞ "NB[PO4HSVOUT71
HSVOUUFNQMBUFS IUUQTHJUIVCDPNSPDLXPPEHSVOUUFNQMBUFS +BWB4DSJQUςϯϓϨʔτΛίϯύΠϧ FKTɾNVTUBDIFɾVOEFSTDPSFͳͲ ܭछྨͷςϯϓϨʔτΤϯδϯʹରԠ˞ ίϯύΠϧؔΦϒδΣΫτͷม72
HSVOUSFRVJSFKT 3FRVJSF+40QUJNJ[FS SKTʹରԠ ".%ϞδϡʔϧΛղܾͯ͠࠷దԽ͢Δ BMNPOEͱ͍͏ϥΠϒϥϦʹରԠͯ͠༏ल˞ 3FRVJSFKT˞ 3FRVJSF+4ʹΑΔίʔυͷׂͱ࠷దԽ73
HSVOUNPDIB IUUQTHJUIVCDPNLNJZBTIJSPHSVOUNPDIB .PDIBͷ)FBEMFTTςετ࣮ߦ 1IBOUPN+4ʹґଘ͍ͯ͠Δ˞ ͪΖΜ26OJU+BTNJOFͷϓϥάΠϯ˞ ςετܥXBUDIͱΈ߹ΘͤͯࣗಈԽ74
ϓϥάΠϯͷࣗ࡞75ݪଇɺΑ͘ࣅͨϓϥάΠϯΛվ͢Δͷ͕ϥΫOPEF+4Λॻ͘͜ͱʹͳΓ·͢
ࣗ࡞ϓϥάΠϯͷઃఆͱϩʔυgrunt.initConfig({sample: {dist: {src: ['js/**/*.js'], // ೖྗݩdest: 'js/all.js', // ग़ྗઌoption: { // ΦϓγϣϯͳͲʢҙʣhoge: 'fuga',peke: 'piyo'}}}});// grunt.jsϑΝΠϧʹهड़// tasksσΟϨΫτϦͷதΛͯ͢ಡΈࠐΈgrunt.loadTasks('tasks');76HSVOUKT
UBTLTTBNQMFKTmodule.exports = function(grunt) {grunt.registerMultiTask('sample', 'own task', function() {var option = this.data.option,src = this.file.src,dest = this.file.dest,// ඇಉظॲཧ͕ඞཁͳͱ͖ʹ༻ doneΛcallbackʹ͢Δ// var done = this.async();// path/to/**/*.js Λղܾͯ֘͠ϑΝΠϧΛྻͰฦ͢srcFiles = grunt.file.expandFiles(src);/*...λεΫͷॲཧ...*/});};77TBNQMFKT
ࢀߟૉࡐ σϞαϯϓϧUBTLTTBNQMFKT ศརϔϧύʔूHSVOUMJCDPOUSJC ൣίʔυྫHSVOUDPOUSJCDPGGFF EPDTQMVHJOTNE EPDTBQJ@UBTLNE EPDTBQJ@pMFNE78
ิBʹ͍ͭͯ ଟ͘ͷ"1*͕มߋ͞ΕΔ ϓϥάΠϯͷϝϯςφϯεঢ়گʹҙ͕ඞཁ ઃఆϑΝΠϧ໊͕(SVOUpMFKTʹมߋ $PGGFF4DSJQUͰઃఆλεΫΛॻ͚ΔΑ͏ʹ˞ ৄ͘͠HSVOUEPDTNJHSBUJPO@HVJEFNE79
·ͱΊ80
ϏϧυͷࣗಈԽ (SVOUϏϧυπʔϧͱͯ͠ศརʂ OQNʹଞͷͻͱ͕࡞ͬͨɺɹɹɹɹɹɹɹɹࣗಈԽͷͨΊͷϓϥάΠϯ͕ࢁ͋Γ·͢ʂ շదʹ։ൃͰ͖Δڥ͕μΠδʂ ࠇ͍ը໘ͱྑ͘͠·͠ΐ͏ʂ ԿΑΓ81
࣮ફ͢Δ͜ͱ͕େࣄπʔϧਅʹͩ͜ΘΔ͖Ͱͳ͍ແཧͳ͘ͷલͷ܁Γฦ͠ΛݮΒͦ͏82
-JWF3FMPBE83
$PEF,JU84
ຊʹେࣄͳ͜ͱʹ࣌ؒΛʂ85
࣍ੈπʔϧ86$-*ͷੈքͰɺ͞Βʹ࣍ͷಈ͖͕࢝·͍ͬͯͨΓ
:FPNBO#SVODI87 4LFMFUPOͷ࡞4DBGGPMEJOH ύοέʔδίϯϙʔωϯτཧ ϩʔΧϧ։ൃڥͷఏڙ ΑΓߴͳࣗಈϏϧυͷఏڙɹͳͲͳͲ
$PNQBSF5BCMF88
͖ͭͮ8FCͰʂ89:FPNBO.PEFSOXPSLqPXTGPSXFCBQQT#SVODI])5.-BQQMJDBUJPOBTTFNCMFS:FPNBOϤʔϚϯϋϒΖ͙:FPNBOͱ#SVODIΛ͞Θ͞Θͨ͠ϋϒΖ͙
͋Γ͕ͱ͏͍͟͝·ͨ͠http://aho.mu90
91 IUUQXXXqJDLSDPNQIPUPTKVSWFUTPO IUUQXXXqJDLSDPNQIPUPTKBTPOXSZBO IUUQXXXqJDLSDPNQIPUPTCJOBSZBQF IUUQXXXqJDLSDPNQIPUPTKVIBOTPOJO IUUQXXXqJDLSDPNQIPUPTLFWJO .BOZ5IBOLT1IPUP$SFEJUT