Front-end with Node.js Tools

Slide 1

Slide 1 text

'SPOUFOEXJUI/PEFKT GPS#FHJOOFST 2014/11/15

Slide 2

Slide 2 text

2014/11/15

Slide 3

Slide 3 text

ࠤ౻า ͞ͱ͏ ͋ΏΉ

Slide 4

Slide 4 text

ຊ໊ BIPNV !

Slide 5

Slide 5 text

IUUQ BIPNV ೥ؒҡ࣋අˇ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

'SPOUFOE5PPMJOH ͔ͭͯͷϑϩϯτΤϯυ։ൃ

Slide 8

Slide 8 text

ྑ͍࢓ࣄ͸શͯ୯७ͳ ࡞ۀͷݎ࣮ͳੵΈॏͶ

Slide 9

Slide 9 text

஍ಓͳख࡞ۀͷ࿈ଓ

Slide 10

Slide 10 text

ࣗಈԽɾޮ཰Խ͢Δखஈ

Slide 11

Slide 11 text

ʊਓਓਓਓਓਓਓʊ ʼɹಥવͷࢮࢮɹʻ ʉ:?:?:?:?:?:ʉ

Slide 12

Slide 12 text

ύοέʔδϚωʔδϟʔ λεΫϥϯφʔ ϞδϡʔϧγεςϜ

Slide 13

Slide 13 text

1BDLBHF.BOBHFS ύοέʔδϚωʔδϟʔ

Slide 14

Slide 14 text

#FGPSF ഑෍αΠτΛ։͘ μ΢ϯϩʔυ͢Δ ࡞ۀσΟϨΫτϦʹίϐʔ

Slide 15

Slide 15 text

"GUFS ίϚϯυୟ͍ͯΠϯετʔϧ % npm install normalize.css % bower install jquery

Slide 16

Slide 16 text

/PEFMBOE #SPXTFSMBOE

Slide 17

Slide 17 text

/PEFMBOE #SPXTFSMBOE

Slide 18

Slide 18 text

OQN /PEFKTඪ४ͷ ύοέʔδϚωʔδϟ #PXFS ϑϩϯτΤϯυ޲͚ͷ ύοέʔδϚωʔδϟ % npm install -g bower

Slide 19

Slide 19 text

{ "name": "best-practices", "version": "1.0.0", "description": "package using versioning practices", "author": "Charlie Robbins ", "main": 'index.js', "dependencies": { "colors": "0.x.x", "express": "2.3.x", "optimist": "0.2.x" }, "devDependencies": { "vows": "0.5.x" }, "engine": "node >= 0.4.1" } package.json

Slide 20

Slide 20 text

{ "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "": "", "": "", "": "" }, "devDependencies": { "": "" } } bower.json

Slide 21

Slide 21 text

ͭͷϦϙδτϦͱઃఆϑΝΠϧ % npm install % bower install QBDLBHFKTPO CPXFSKTPO

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging

Slide 24

Slide 24 text

/PEFMBOE #SPXTFSMBOE

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

͢΂ͯͷΤίγεςϜʹରԠ͢Δʁ % npm install express underscore # server % npm install jquery backbone # client % npm install grunt-browserify # build task QBDLBHFKTPO

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

ղܾ͢΂͖໰୊͸ଟ͍ ΋͔ͨ͠͠Β࣮ݱ͢Δ͔΋

Slide 29

Slide 29 text

http://havelog.ayumusato.com/develop/others/e630-npm_meets_frontend.html

Slide 30

Slide 30 text

‣ ͍ͭ΋ͷίϚϯυΛ୹ॖͯ͠ΈΔʢCPXFS΋ಉ͡ʣ 5JQTTIPSUDVUT % npm install --save % npm i -S % npm remove --save-dev % npm rm -D

Slide 31

Slide 31 text

‣ ݱࡏͷOPEF@NPEVMFT಺ͷόʔδϣϯΛه࿥ͯ͠ݻఆ 5JQTOQNTISJOLXSBQ % npm shrinkwrap wrote npm-shrinkwrap.json "name": "A", "version": "0.1.0", "dependencies": { "B": { "version": "0.0.1", "dependencies": { "C": { "version": "0.1.0" ...

Slide 32

Slide 32 text

‣ όʔδϣϯͷڝ߹ͰґଘղܾͰ͖ͳ͍ͱ͖ 5JQTCPXFSKTPOSFTPMVUJPOT Unable to find a suitable version for angular please choose one: "resolutions": { "angular": "1.3.0" }

Slide 33

Slide 33 text

5BTL3VOOFS λεΫϥϯφʔ

Slide 34

Slide 34 text

#FGPSF +4)JOUͰจ๏νΣοΫ͢Δ ը૾ͷϑΝΠϧαΠζΛ࠷దԽ͢Δ +BWB4DSJQUΛίʔυϛχϑΝΠ͢Δ % jshint src1.js src2.js % imageoptim --directory ~/images % uglifyjs src1.js src2.js

Slide 35

Slide 35 text

"GUFS ·ͱΊͯࣗಈͰ࣮ߦ % grunt some-task % gulp some-task

Slide 36

Slide 36 text

‣ $444QSJUFTͷੜ੒ ‣ ը૾ͷϑΝΠϧαΠζ࠷దԽ ‣ ։ൃ༻ϩʔΧϧαʔόͷىಈ ‣ ελΠϧΨΠυͷੜ੒ ‣ ςετεΠʔτͷ࣮ߦ ‣ +4)JOU$44-JOUͷ࣮ߦ ‣ +BWB4DSJQU$44ͷϛχϑΝΠ ‣ ϑΝΠϧͷ݁߹ɾϞδϡʔϧγεςϜͷϏϧυFUD ଟ࠼ͳλεΫΛ࣮ߦͯ͘͠ΕΔ

Slide 37

Slide 37 text

(SVOU /PEFKTλεΫϥϯφʔ (VMQ 4USFBNJOHϏϧυγεςϜ % npm install -g gulp % npm install —-save-dev gulp % npm install -g grunt-cli % npm install —-save-dev grunt

Slide 38

Slide 38 text

3,827 plugins

Slide 39

Slide 39 text

1,254 plugins

Slide 40

Slide 40 text

grunt.loadNpmTasks() require('gulp-***') % npm i —-save-dev (SVOUpMFKT (VMQpMFKT QBDLBHFKTPO λεΫͷઃఆͱϓϥάΠϯͷ؅ཧ

Slide 41

Slide 41 text

grunt.initConfig stylus: dist: files: 'temp/index.css': 'src/index.styl' autoprefixer: dist: files: 'temp/index.css': 'temp/index.css' cssmin: dist: files: 'dist/index.min.css': 'temp/index.css' ! grunt.registerTask('build-css', ['stylus, autoprefixer', 'cssmin']); Configuration over code

Slide 42

Slide 42 text

JOEFYTUZM ⚙ TUZMVT ⚙ BVUPQSFpYFS ⚙ DTTNJO JOEFYNJODTT UFNQDTT UFNQDTT

Slide 43

Slide 43 text

! ! var gulp = require('gulp'); var sass = require('gulp-stylus') var autoprefixer = require('gulp-autoprefixer') var cssmin = require('gulp-cssmin') ! gulp.task('cssbuild', function () { gulp.src('src/index.styl') .pipe(stylus()) .pipe(autoprefixer()) .pipe(cssmin()) .pipe(gulp.dest('dist')) }); Code over configuration

Slide 44

Slide 44 text

JOEFYTUZM ⚙ TUZMVT ⚙ BVUPQSFpYFS ⚙ DTTNJO JOEFYNJODTT 4USFBN JONFNPSZ

Slide 45

Slide 45 text

grunt.initConfig jsduck: options: 'builtin-classes': false 'warnings' : ['-dup_member', '-type_name'] 'external' : ['XMLHttpRequest'] dist: src : ['dist/phalanx.debug.js'] dest : 'docs' plato: options: jshint : grunt.file.readJSON('.jshintrc') dist: src : ['src/**/*.js'] dest : 'reports' ! grunt.loadNpmTasks 'grunt-jsduck' grunt.loadNpmTasks 'grunt-plato' Gruntfile.coffee

Slide 46

Slide 46 text

http://cowboy.github.io/state-of-grunt-fe-summit-2014-talk/

Slide 47

Slide 47 text

‣ KJUHSVOU λεΫ࣮ߦ࣌·ͰϩʔυΛ஗Ԇͤ͞Δ ‣ HSVOUDPODDVSSFOU λεΫͷ࣮ߦΛฒྻԽͯ͠ߴ଎Խ ‣ HSVOUQBSBMMFMJ[F λεΫͷೖྗϑΝΠϧਫฏ෼ׂͯ͠ߴ଎Խ ‣ MPBEHSVOUDPOpH ઃఆϑΝΠϧͷ෼ׂͱλεΫͷΦʔτϩʔυ 5JQT(SVOUQMVHJOT

Slide 48

Slide 48 text

ઃఆ͕ංେԽͯ͠ ਏ͘ͳͬͯ͠·ͬͨΒ

Slide 49

Slide 49 text

‣ OQN!ͰҾ਺΋౉ͤΔΑ͏ʹͳͬͨ ':*OQNSVODPNNBOE % npm run lint "scripts": { "lint": "jshint **.js", "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml" }

Slide 50

Slide 50 text

(PPPPPE

Slide 51

Slide 51 text

"scripts": { "prepublish": "marked-man --name gulp docs/CLI.md > gulp.1", "lint": "jshint lib bin index.js --reporter node_modules/jshint-stylish/stylish.js --exclude node_modules", "test": "npm run-script lint && mocha --reporter spec", "coveralls": "istanbul cover _mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | coveralls && rm -rf ./coverage" }, https://github.com/gulpjs/gulp/blob/master/package.json gulpjs/gulp: package.json

Slide 52

Slide 52 text

http://substack.net/task_automation_with_npm_run

Slide 53

Slide 53 text

5BTLDFOUSJDDPOpHVSBUJPO+40/ઃఆϥΠΫ ౷߹λεΫϥϯφʔͱͯ͠όϥϯε͕ྑ͍ 5BSHFUDFOUSJDDPOpHVSBUJPO+4ίʔυϥΠΫ ϑΝΠϧʹෳ਺ͷॲཧΛ͢ΔϏϧυϓϩηε޲͖ AOQNSVOA͸ҙ֎ʹ࢖͑Δ /PEFKT؀ڥͳΒ࣮֬ʹར༻Ͱ͖ͯखܰˍγϯϓϧ

Slide 54

Slide 54 text

.PEVMF4ZTUFN ϞδϡʔϧγεςϜ

Slide 55

Slide 55 text

#FGPSF ࠶ར༻ੑ͕௿͍௕େͳίʔυ ϖʔδ୯Ґʁ͘Β͍Ͱ෼ׂͯ͠Δ͔΋ TDSJQUཁૉΛॱ൪ʹฒ΂Α͏

Slide 56

Slide 56 text

"GUFS ΫϥΠΞϯταΠυ.7$'MVYʢŝžŕ Ϟδϡʔϧ؅ཧʢŝžŕ ґଘղܾʢŝžŕ

Slide 57

Slide 57 text

‣ ෼ׂ͞ΕͨίʔυʢϑΝΠϧʣΛϞδϡʔϧͱͯ͠؅ཧ ‣ ϏϧυϓϩηεPSϥϯλΠϜʹґଘղܾ ϞδϡʔϧγεςϜʹٻΊΔ΋ͷ .PEVMFNBOBHFNFOU 3FTPMWFEFQFOEFODJFT ⚙ %

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

#SPXTFSJGZ $PNNPO+4Λϒϥ΢βͰ࣮ߦ % npm install —-g browserify

Slide 60

Slide 60 text

⚙ #SPXTFSJGZ CVOEMFKT OPEF@NPEVMFT OPEFCVJMUJOT .PEVMFT $PNNPO+4

Slide 61

Slide 61 text

! # module.js module.exports = function (n) { return n * 111 }; ! # index.js var module = require('./module'); console.log(module(5)); ! # cmd $ browserify index.js > bundle.js $ node bundle.js # => 555 example:CommonJS

Slide 62

Slide 62 text

{ "name": "mypkg", "version": "1.2.3", "main": "main.js", "browser": { "foo": "./vendor/foo.js" }, "browserify": { "transform": "browserify-shim" }, "browserify-shim": { "foo": "FOO" } } package.json

Slide 63

Slide 63 text

3FRVJSFKT ".%ͱݺ͹ΕΔҰ࿈ͷ࢓૊Έ % bower install requirejs % npm install -g r.js

Slide 64

Slide 64 text

⚙ #SPXTFS 3FRVJSF+4 ' 4FSWFS .PEVMFT ".% "TZODMPBEJOH

Slide 65

Slide 65 text

! # html ! # main.js define([‘module’], function(module) { alert(module.foo); // ‘bar’ }); ! # module.js define(function() { return {foo: ‘bar’} }); example:AMD

Slide 66

Slide 66 text

require.config({ paths: { jquery : "libs/jquery.min", backbone : "libs/backbone.min", underscore : "libs/underscore.min", }, shim : { underscore : { exports : "_" }, backbone : { deps : [ "jquery", "underscore" ], exports : "Backbone" } } }); require.config

Slide 67

Slide 67 text

XFCQBDL ".% $PNNPO+4ʹ྆ରԠЋ % npm install —-g webpack

Slide 68

Slide 68 text

⚙ XFCQBDL .PEVMFT ʢ$PNNPO+4".%ʣ " # &OUSZQPJOU "CVOEMFKT #CVOEMFKT DPNNPOKT " #

Slide 69

Slide 69 text

⚙ XFCQBDL .PEVMFT ʢ$PNNPO+4".%ʣ " # &OUSZQPJOU "CVOEMFKT #CVOEMFKT DPNNPOKT DIVOLKT "TZODMPBEJOH " #

Slide 70

Slide 70 text

! ! var path = require("path"); var CommonsChunkPlugin = require("../../lib/optimize/ CommonsChunkPlugin"); module.exports = { entry: { pageA : "./pageA", pageB : "./pageB" }, output: { path : path.join(__dirname, "js"), filename : "[name].bundle.js", chunkFilename : "[id].chunk.js" }, plugins: [ new CommonsChunkPlugin("commons.js") ] } webpack.config.js

Slide 71

Slide 71 text

http://webpack.github.io/docs/comparison.html

Slide 72

Slide 72 text

EVP ύοέʔδ؅ཧϏϧυγεςϜ % npm install —-g duo

Slide 73

Slide 73 text

⚙ EVP CVOEMFKT .PEVMFT $PNNPO+4 ( (JUIVC ⚙ EVP

Slide 74

Slide 74 text

! # JavaScript var uid = require('matthewmueller/uid'); var fmt = require('yields/fmt'); ! var msg = fmt('Your unique ID is %s!', uid()); window.alert(msg); ! ! # CSS @import 'necolas/normalize.css'; @import './layout/layout.css'; ! body { color: teal; background: url('./background-image.jpg'); } example:CommonJS & CSS

Slide 75

Slide 75 text

http://ameblo.jp/principia-ca/entry-11932522962.html

Slide 76

Slide 76 text

$PNNPO+4ελΠϧ͑͞ཧղ͍ͯ͠Ε͹Ұ൪ϥΫ ઃఆϑΝΠϧ΋΄΅ඞཁͳ͍ͷͰಋೖ΋༰қ 1$ͳΒ".%΋ѱ͘ͳ͍͕ɺϞόΠϧͰ͸Ͳ͏͔ ύεղܾͷઃఆ͕෼ް͘ͳΓ͕ͪˍಠࣗه๏˚ େ؋ڊ๒ओٛ ઃఆ͸΋ͪΖΜ෼ް͘ͳΔ͕ɺ෼ׂϏϧυ͸ັྗత (JU)VC͔ΒͷΠϯετʔϧˍϏϧυ͕γʔϜϨε˕ ݱঢ়ͩͱOQN#SPXTFSJGZͱൺ΂ͯ༏Ґੑ͕௿͍ ˞ݸਓͷײ૝Ͱ͢

Slide 77

Slide 77 text

$PODMVTJPO ·ͱΊ

Slide 78

Slide 78 text

‣ ύοέʔδϦϙδτϦ͸OQNʹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ू໿͞ΕΔ͔΋͠Εͳ͍͠ɺ͞Εͳ͍͔΋͠Εͳ͍ ‣ (SVOUλεΫϥϯφʔͱ(VMQϏϧυγεςϜ͸ɹɹɹɹɹɹɹ ޷͖ʹ࢖͍෼͚ͨΒྑ͍ͷͰ͸ ‣ OQNSVOศརͩΑʢݸਓతͳਪ͠ʣ ‣ ࠓ͸$PNNPO+4ελΠϧ͕ϑϩϯτͰ΋Φεεϝ͔΋ ‣ Ϟδϡʔϧ؅ཧ͸8FC$PNQPOFOUTͱ͔&4ͱ͔ɹɹɹɹɹ ৭ʑ͋Δ͔Β৭ʑมԽ͠΍ͦ͢͏

Slide 79

Slide 79 text

5IBOLT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂