npm-scriptsについて - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

OQNTDSJQUTʹ͍ͭͯ 2018-01-20 ໦ଜ ݑن

Slide 2

Slide 2 text

ࡢࠓͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯ λεΫϥϯφʔ OQNTDSJQUTͷ࢖͍ํ

Slide 3

Slide 3 text

ࡢࠓͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯ λεΫϥϯφʔ OQNTDSJQUTͷ࢖͍ํ

Slide 4

Slide 4 text

ࡢࠓͷWebϑϩϯτΤϯυ։ൃ Node.jsͷπʔϧ͕ෆՄܽ πʔϧͷ؅ཧɺ࣮ߦʹ͸npmΛ࢖͏ npm: node package manager

Slide 5

Slide 5 text

ϑϩϯτΤϯυ։ൃͷπʔϧ • babel • browserify/webpack • node-sass • browser-sync …etc ͜ΕΒͷπʔϧ܈Λͭͳ͗߹ΘͤΔ

Slide 6

Slide 6 text

ࡢࠓͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯ λεΫϥϯφʔ OQNTDSJQUTͷ࢖͍ํ

Slide 7

Slide 7 text

λεΫϥϯφʔͱ͸ JavaScriptͷτϥϯεύΠϧ΍SCSSͷίϯύΠ ϧɺrequire/importͷղܾͱ͍ͬͨॲཧͷ࣮ߦ ΛࣗಈԽ͢Δ

Slide 8

Slide 8 text

୅දతͳλεΫϥϯφʔ • grunt • gulp • npm-scripts

Slide 9

Slide 9 text

grunt / gulp ϓϥάΠϯʹΑΓଟ༷ͳػೳΛఏڙ ઃఆ͕ෳࡶʹͳΓ͕ͪ

Slide 10

Slide 10 text

npm-scripts shell script / batchίϚϯυ Λ࣮ߦ  package.jsonʹఆٛ γϯϓϧͰ֮͑Δ͜ͱ͕গͳ͍ ػೳ͕ශऑ

Slide 11

Slide 11 text

ࡢࠓͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯ λεΫϥϯφʔ OQNTDSJQUTͷ࢖͍ํ

Slide 12

Slide 12 text

npm-scriptsͷఆٛ

Slide 13

Slide 13 text

npm-scriptsͰศརͳπʔϧ npm-run-all cross-env rimraf mkdirp chokidar-cli

Slide 14

Slide 14 text

ࡢࠓͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯ λεΫϥϯφʔ OQNTDSJQUTͷ࢖͍ํ