Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
makeとnpmでプロジェクトをコントロールする
Search
Taketoshi Aono(青野健利 a.k.a brn)
March 08, 2018
Programming
4
370
makeとnpmでプロジェクトをコントロールする
makeとnpmをつかってプロジェクトをなんとかしてる話
#uit_2
Taketoshi Aono(青野健利 a.k.a brn)
March 08, 2018
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3.1k
Parsing Javascript
brn
14
9.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
990
Modern TypeScript
brn
2
830
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
900
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
720
Other Decks in Programming
See All in Programming
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
730
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
Cursorハンズオン実践!
eltociear
2
1.2k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Developer Joy - The New Paradigm
hollycummins
1
370
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
990
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
910
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
250
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
NIKKEI Tech Talk#38
cipepser
0
230
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
GitHub's CSS Performance
jonrohan
1032
470k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Building an army of robots
kneath
305
46k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Gamification - CAS2011
davidbonilla
81
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Transcript
Control project with make and npm
Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger
OSS Contributor of V8 About http://info.b6n.ch
Agenda • Why we should stop using gulp or grunt
• npm scripts • Convinient modules • Dependencies and DLL • Linting٥Formatting • Before commit • Make • Wrap by Makefile • Docker
Why we should stop using gulp or grunt javascriptד鎸鶢ׅةأؙٓٝش٦כ㺁僒ח㾩➂⻉׃װֻׅծ ת㹑鎉涸דזְךד铣חְֻ
Alternate? npm scriptsדװגְֻ Why we should stop using gulp or
grunt
npm scripts npm run ~ד㹋遤דֹ؝وٝس shell؝وٝس湫䱸㹋遤ׅ
Convinient modules npm scriptsכءٝفָٕ堣腉ָshellח䊩〸ׁג׃תֲ windowsך㜥さכ؝وٝسفٗٝفزծmacכbashהַך鴟ד ⢪ִ؝وٝسָⰋֻ麩ֲ ֿדnpm modulesד䊴ェ ׅ npm scripts
rimraf rm -r 湱䔲ך⹛⡲䲿⣘ׅ ر؍ؙٖزٔ⚥魦׀הⰋ嶊׃ׅ npm scripts
ejs-cli ejsךذٝفٖ٦زؒٝآٝcliד⹛⡲ׇׁ 䒷侧חjson床ֿׅהד㾜ׁ npm scripts
cpx File Glob⢪גך؝ؾ٦堣腉䲿⣘ٌׅآُ٦ٕ watch堣腉װծtransform堣腉ַ֮ז넝堣腉 npm scripts
npm-run-all npm؝وٝسך⚛٥湫㹋遤〳腉חׅ ָֿזְהװגזְ npm scripts
# 直列実行 # command1 => command2 => command3! run-s command1
command2 command3! ! # 並列実行 # command1 =>! # command2 =>! # command3 =>! run-p command1 command2 command3!
Dependencies and DLL فٗآؙؑزדכWebpackהDLLPlugin⢪גְ DLLPluginכ3rd Partyךٌآُ٦ٕהַ✮תהגְֶג غٝسٕ鸞䏝ぢ♳ׇׁךPlugin
Bundle all dependencies webpack♳דpackage.jsonךdependencies䫙ֹ⳿׃גׅץג DLLחתהגְָծٌآُ٦ָٕ㢌㜥さח䩛⹛דDLL ⹛ַׅךָ⦜ postinstall⢪ֲ Dependencies and DLL
const PKG = require('./package.json');! ! module.exports = {! entry: {!
"dll": Object.keys(PKG.dependencies);! },! ...! }!
postinstall npm scriptsח'post install'הְֲせדscript鷄⸇ׅהծ npm installך֮הח䭷㹀׃script㹋遤׃גֻ ֿך堣腉ⵃ欽׃גpostinstallחdll䭷㹀ׅ ָծ npmהnpm install
'module'ךהֹחpostinstallָ⹛⡲׃זְ => yarn⢪גְךד搀㉏겗 Dependencies and DLL
"scripts": {! ...! "postinstall": "run-s dll-prod dll-debug",! ...! }!
Linting and Formatting TypeScript崢זךדtslintהprettier⢪גְ tslint麩ծְ֮כprettierדؿؓ٦وحزׁגְזְؿ؋؎ٕ commitׇֻׁזְ
git pre-commit hook Gitד盖椚׃גְفٗآؙؑزזל.git/hooks⟃♴חpre- commitהְֲせדshellأؙٔفز縧ֻֿהדcommitח荈 ⹛דscript㹋遤׃גֻ ծぐ涪罏ח剑ⴱחpre-commitأؙٔفز؝ؾ٦׃ג顗 ֲ䗳銲ָ֮⦜ Linting and
Formatting
pre-commit pre-commitהְֲnpm modulesכinstallׅה荈⹛ד git pre-commitך鏣㹀׃גֻ ׁחpackage.jsonחprecommitהְֲ갪湡⡲ה䭷㹀׃ npm script㹋遤׃גֻ ת0⟃㢩ךreturn codeד穄✪ׅה؝ىحز⨡姺׃גֻ
ֿ⢪ֲךָし Linting and Formatting
{! ...! "scripts": {! "test": "echo \"Error\" && exit 1",!
"foo": "echo \"fooo\" && exit 0",! "bar": "echo \"bar\" && exit 0"! },! "pre-commit": [! "foo",! "bar",! "test"! ]! }! } !
make npm scriptכ⤑ⵃזךָծؿٗٝزؒٝسؒٝآص،⟃㢩חה ג֮ת꼧厩ָזְ ֿד؝وٝسٓ؎ٝךةأؙٓٝش٦ה׃גmakeⵃ欽ׅ
What is make? makeכUnix禸OSךرؿ؋ؙزأةٝت٦سחזגְ ةأؙٓٝش٦דC鎉铂ך؝ٝػ؎ٕ瘝ח״ֻ⢪גְ 圓俑כ䎂僒זךד醱꧟ח剅ֻֿהדֹםה鋅ַװ ְׅ ֿדֿךmakenpm scriptsךWrapperה׃ג⢪ֲ make
Makefile makeכMakefileהְֲؿ؋؎ٕ䱱׃ ֿח鎸鶢ׁةأؙ㹋遤ׅ make
WEBPACK = node node_modules/.bin/webpack! ! .PHONY: build install! ! all:
install build! ! build:! NODE_ENV=production WEBPACK! ! install:! yarn install!
WEBPACK = Webpackコマンドのエイリアス! ! .PHONY: ファイルが存在していても優先するコマンド! ! all: デフォルト実行するコマンド! !
コマンド名:! 実行するコマンド!
Docker 植㖈ךفٗآؙؑزכKubernetes⢪欽׃גְךד Dockerדؽٕس㹋遤׃Push׃גְ ךnpm scriptכDockerfileח鎸鶢׃גֶ MakefileכDockerךؽٕس遤ֲךדnpmך؝وٝسכ㹋遤׃ז ְ
make npm Docker gcr
満 npm scripts穠㽷醱꧟חזגֻה׃וֻז windowsِ٦ؠ٦ָث٦يחְזְךדwindowsד⹛ַזְ〳腉䚍 ָ넝ְ makeכmac٥linuxِ٦ؠ٦כرؿٕؓزד㶷㖈׃גְָծ windowsכcygwin٥mingwהַⰅזְה windows10זזהַז
תה makeכ؎ٝة٦ؿؑ٦أך窟♧ָדֹךדזַזַ״ְדׅ