Front-end with Node.js Tools

Transcript

1. 'SPOUFOE
   XJUI
   /PEFKT
   GPS
   #FHJOOFST 2014/11/15

2. 2014/11/15

3. ࠤ౻
   า ͞ͱ͏ ͋ΏΉ

4. ຊ໊ BIPNV !

5. IUUQ BIPNV ೥ؒҡ࣋අ
   ˇ 

6. None

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 <[email protected]>", "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

22. None

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

24. /PEF
    MBOE #SPXTFS
    MBOE

25. None

26. ͢΂ͯͷΤίγεςϜʹରԠ͢Δʁ % npm install express underscore # server % npm

    install jquery backbone # client % npm install grunt-browserify # build task QBDLBHFKTPO
27. None

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 ⚙ %

58. None

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
    ! ⌂