Front-end with Node.js Tools

Node学園祭 2014 http://nodefest.jp/2014/ で使用したスライドです。本編30分。

リンク集 https://gist.github.com/ahomu/3d4a5e57bb7c936d8cab

Transcript

1. 'SPOUFOE
   XJUI
   /PEFKT
   GPS
   #FHJOOFST 2014/11/15
2. 2014/11/15
3. ࠤ౻
   า ͞ͱ͏ ͋ΏΉ
4. ຊ໊ BIPNV !
5. IUUQ BIPNV ೥ؒҡ࣋අ
   ˇ 
7. 'SPOUFOE
   5PPMJOH
   ͔ͭͯͷϑϩϯτΤϯυ։ൃ
8. ྑ͍࢓ࣄ͸શͯ୯७ͳ ࡞ۀͷݎ࣮ͳੵΈॏͶ
9. ஍ಓͳख࡞ۀͷ࿈ଓ
10. ࣗಈԽɾޮ཰Խ͢Δखஈ
11. ʊਓਓਓਓਓਓਓʊ
    ʼɹಥવͷࢮࢮɹʻ
    ʉ:?:?:?:?:?:ʉ
12. ύοέʔδϚωʔδϟʔ 
    λεΫϥϯφʔ 
    ϞδϡʔϧγεςϜ
13. 1BDLBHF
    .BOBHFS
    ύοέʔδϚωʔδϟʔ
14. #FGPSF ഑෍αΠτΛ։͘ μ΢ϯϩʔυ͢Δ ࡞ۀσΟϨΫτϦʹίϐʔ
15. "GUFS ίϚϯυୟ͍ͯΠϯετʔϧ % npm install normalize.css % bower install jquery
16. /PEF
    MBOE #SPXTFS
    MBOE
17. /PEF
    MBOE #SPXTFS
    MBOE
18. OQN
    /PEFKTඪ४ͷ
    ύοέʔδϚωʔδϟ #PXFS
    ϑϩϯτΤϯυ޲͚ͷ
    ύοέʔδϚωʔδϟ % npm install -g bower
19. { "name": "best-practices", "version": "1.0.0", "description": "package using versioning practices", "author": "Charlie Robbins <charlie@nodejitsu.com>", "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
20. { "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<test-framework-name>": "<version>" } } bower.json
21. ͭͷϦϙδτϦͱઃఆϑΝΠϧ % npm install % bower install QBDLBHFKTPO CPXFSKTPO
23. http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging
24. /PEF
    MBOE #SPXTFS
    MBOE
26. ͢΂ͯͷΤίγεςϜʹରԠ͢Δʁ % npm install express underscore # server % npm install jquery backbone # client % npm install grunt-browserify # build task QBDLBHFKTPO
28. ղܾ͢΂͖໰୊͸ଟ͍
    ΋͔ͨ͠͠Β࣮ݱ͢Δ͔΋
29. http://havelog.ayumusato.com/develop/others/e630-npm_meets_frontend.html
30. ‣ ͍ͭ΋ͷίϚϯυΛ୹ॖͯ͠ΈΔʢCPXFS΋ಉ͡ʣ 5JQT
    TIPSUDVUT % npm install --save <package-name> % npm i -S <package-name> % npm remove --save-dev <package-name> % npm rm -D <package-name>
31. ‣ ݱࡏͷ
    OPEF@NPEVMFT
    ಺ͷόʔδϣϯΛه࿥ͯ͠ݻఆ 5JQT
    OQNTISJOLXSBQ % npm shrinkwrap wrote npm-shrinkwrap.json "name": "A", "version": "0.1.0", "dependencies": { "B": { "version": "0.0.1", "dependencies": { "C": { "version": "0.1.0" ...
32. ‣ όʔδϣϯͷڝ߹ͰґଘղܾͰ͖ͳ͍ͱ͖ 5JQT
    CPXFSKTPO
    SFTPMVUJPOT Unable to find a suitable version for angular please choose one: "resolutions": { "angular": "1.3.0" }
33. 5BTL
    3VOOFS
    λεΫϥϯφʔ
34. #FGPSF +4)JOU
    Ͱจ๏νΣοΫ͢Δ ը૾ͷϑΝΠϧαΠζΛ࠷దԽ͢Δ +BWB4DSJQU
    ΛίʔυϛχϑΝΠ͢Δ % jshint src1.js src2.js % imageoptim --directory ~/images % uglifyjs src1.js src2.js
35. "GUFS ·ͱΊͯࣗಈͰ࣮ߦ % grunt some-task % gulp some-task
36. ‣ $44
    4QSJUFT
    ͷੜ੒
    ‣ ը૾ͷϑΝΠϧαΠζ࠷దԽ
    ‣ ։ൃ༻ϩʔΧϧαʔόͷىಈ
    ‣ ελΠϧΨΠυͷੜ੒
    ‣ ςετεΠʔτͷ࣮ߦ
    ‣ +4)JOU
    
    $44-JOU
    ͷ࣮ߦ
    ‣ +BWB4DSJQU
    
    $44
    ͷϛχϑΝΠ
    ‣ ϑΝΠϧͷ݁߹ɾϞδϡʔϧγεςϜͷϏϧυ
    
    
    FUD ଟ࠼ͳλεΫΛ࣮ߦͯ͘͠ΕΔ
37. (SVOU
    /PEFKT
    λεΫϥϯφʔ (VMQ
    4USFBNJOH
    ϏϧυγεςϜ % npm install -g gulp % npm install —-save-dev gulp % npm install -g grunt-cli % npm install —-save-dev grunt
38. 3,827 plugins
39. 1,254 plugins
40. grunt.loadNpmTasks() require('gulp-***') % npm i —-save-dev (SVOUpMFKT
    (VMQpMFKT QBDLBHFKTPO λεΫͷઃఆͱϓϥάΠϯͷ؅ཧ
41. 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
42. JOEFYTUZM ⚙ TUZMVT ⚙ BVUPQSFpYFS ⚙ DTTNJO JOEFYNJODTT UFNQDTT UFNQDTT
43. ! ! 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
44. JOEFYTUZM ⚙ TUZMVT ⚙ BVUPQSFpYFS ⚙ DTTNJO JOEFYNJODTT 4USFBN
    JO
    NFNPSZ
45. 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
46. http://cowboy.github.io/state-of-grunt-fe-summit-2014-talk/
47. ‣ KJUHSVOU
     λεΫ࣮ߦ࣌·ͰϩʔυΛ஗Ԇͤ͞Δ
    ‣ HSVOUDPODDVSSFOU
     λεΫͷ࣮ߦΛฒྻԽͯ͠ߴ଎Խ
    ‣ HSVOUQBSBMMFMJ[F
     λεΫͷೖྗϑΝΠϧਫฏ෼ׂͯ͠ߴ଎Խ
    ‣ MPBEHSVOUDPOpH
     ઃఆϑΝΠϧͷ෼ׂͱλεΫͷΦʔτϩʔυ 5JQT
    (SVOU
    QMVHJOT
48. ઃఆ͕ංେԽͯ͠
    ਏ͘ͳͬͯ͠·ͬͨΒ
49. ‣ OQN!
    ͰҾ਺΋౉ͤΔΑ͏ʹͳͬͨ ':*
    OQN
    SVO
    DPNNBOE % npm run lint "scripts": { "lint": "jshint **.js", "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml" }
50. (PPPPPE
51. "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
52. http://substack.net/task_automation_with_npm_run
53. 5BTL
    DFOUSJD
    DPOpHVSBUJPO
    
    +40/ઃఆϥΠΫ
    ౷߹λεΫϥϯφʔͱͯ͠όϥϯε͕ྑ͍ 5BSHFU
    DFOUSJD
    DPOpHVSBUJPO
    
    +4ίʔυϥΠΫ
    ϑΝΠϧʹෳ਺ͷॲཧΛ͢ΔϏϧυϓϩηε޲͖ AOQN
    SVOA
    ͸ҙ֎ʹ࢖͑Δ
    /PEFKT
    ؀ڥͳΒ࣮֬ʹར༻Ͱ͖ͯखܰˍγϯϓϧ
54. .PEVMF
    4ZTUFN
    ϞδϡʔϧγεςϜ
55. #FGPSF ࠶ར༻ੑ͕௿͍௕େͳίʔυ ϖʔδ୯Ґʁ͘Β͍Ͱ෼ׂͯ͠Δ͔΋ TDSJQU
    ཁૉΛॱ൪ʹฒ΂Α͏
56. "GUFS ΫϥΠΞϯταΠυ.7$
    
    'MVYʢŝžŕ Ϟδϡʔϧ؅ཧʢŝžŕ ґଘղܾʢŝžŕ
57. ‣ ෼ׂ͞ΕͨίʔυʢϑΝΠϧʣΛϞδϡʔϧͱͯ͠؅ཧ
    ‣ Ϗϧυϓϩηε
    PS
    ϥϯλΠϜ
    ʹґଘղܾ ϞδϡʔϧγεςϜʹٻΊΔ΋ͷ .PEVMF
    NBOBHFNFOU 3FTPMWF
    EFQFOEFODJFT ⚙ %
59. #SPXTFSJGZ
    $PNNPO+4
    Λϒϥ΢βͰ࣮ߦ % npm install —-g browserify
60. ⚙ #SPXTFSJGZ CVOEMFKT OPEF@NPEVMFT OPEF
    CVJMUJOT .PEVMFT
    $PNNPO+4
61. ! # 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
62. { "name": "mypkg", "version": "1.2.3", "main": "main.js", "browser": { "foo": "./vendor/foo.js" }, "browserify": { "transform": "browserify-shim" }, "browserify-shim": { "foo": "FOO" } } package.json
63. 3FRVJSFKT
    ".%
    ͱݺ͹ΕΔҰ࿈ͷ࢓૊Έ % bower install requirejs % npm install -g r.js
64. ⚙ #SPXTFS 3FRVJSF+4 ' 4FSWFS .PEVMFT
    ".% "TZOD
    MPBEJOH
65. ! # html <script src="require.js" data-main="main.js" async></script> ! # main.js define([‘module’], function(module) { alert(module.foo); // ‘bar’ }); ! # module.js define(function() { return {foo: ‘bar’} }); example:AMD
66. 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
67. XFCQBDL
    
    ".%
    $PNNPO+4
    ʹ྆ରԠ Ћ % npm install —-g webpack
68. ⚙ XFCQBDL .PEVMFT
    ʢ$PNNPO+4".%ʣ " # &OUSZ
    QPJOU "CVOEMFKT #CVOEMFKT DPNNPOKT " #
69. ⚙ XFCQBDL .PEVMFT
    ʢ$PNNPO+4".%ʣ " # &OUSZ
    QPJOU "CVOEMFKT #CVOEMFKT DPNNPOKT DIVOLKT "TZOD
    MPBEJOH " #
70. ! ! 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
71. http://webpack.github.io/docs/comparison.html
72. EVP
    ύοέʔδ؅ཧ ϏϧυγεςϜ % npm install —-g duo
73. ⚙ EVP CVOEMFKT .PEVMFT
    $PNNPO+4 ( (JUIVC ⚙ EVP
74. ! # 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
75. http://ameblo.jp/principia-ca/entry-11932522962.html
76. $PNNPO+4ελΠϧ͑͞ཧղ͍ͯ͠Ε͹Ұ൪ϥΫ
    ઃఆϑΝΠϧ΋΄΅ඞཁͳ͍ͷͰಋೖ΋༰қ 1$ͳΒ".%΋ѱ͘ͳ͍͕ɺϞόΠϧͰ͸Ͳ͏͔
    ύεղܾͷઃఆ͕෼ް͘ͳΓ͕ͪˍಠࣗه๏˚ େ؋ڊ๒ओٛ
    ઃఆ͸΋ͪΖΜ෼ް͘ͳΔ͕ɺ෼ׂϏϧυ͸ັྗత (JU)VC͔ΒͷΠϯετʔϧˍϏϧυ͕γʔϜϨε˕
    ݱঢ়ͩͱ
    OQN
    
    #SPXTFSJGZ
    ͱൺ΂ͯ༏Ґੑ͕௿͍ ˞ݸਓͷײ૝Ͱ͢
77. $PODMVTJPO
    ·ͱΊ
78. ‣ ύοέʔδϦϙδτϦ͸
    OQN
    ʹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ू໿͞ΕΔ͔΋͠Εͳ͍͠ɺ͞Εͳ͍͔΋͠Εͳ͍
    ‣ (SVOUλεΫϥϯφʔ
    ͱ
    (VMQϏϧυγεςϜ
    ͸ɹɹɹɹɹɹɹ ޷͖ʹ࢖͍෼͚ͨΒྑ͍ͷͰ͸
    ‣ OQN
    SVO
    ศརͩΑʢݸਓతͳਪ͠ʣ
    ‣ ࠓ͸
    $PNNPO+4
    ελΠϧ͕ϑϩϯτͰ΋Φεεϝ͔΋
    ‣ Ϟδϡʔϧ؅ཧ͸
    8FC$PNQPOFOUT
    ͱ͔
    &4
    ͱ͔ɹɹɹɹɹ ৭ʑ͋Δ͔Β৭ʑมԽ͠΍ͦ͢͏
79. 5IBOLT
    
    IUUQBIPNV
    
    
    !BIPNV
    
    
    HJUIVCDPNBIPNV
    ! ⌂