Front-end with Node.js Tools

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
November 13, 2014

Front-end with Node.js Tools

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

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

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

November 13, 2014
Tweet

Transcript

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

  2. 2014/11/15

  3. ࠤ౻า ͞ͱ͏ ͋ΏΉ

  4. ຊ໊ BIPNV !

  5. IUUQ BIPNV ೥ؒҡ࣋අˇ 

  6. None
  7. 'SPOUFOE5PPMJOH ͔ͭͯͷϑϩϯτΤϯυ։ൃ

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

  9. ஍ಓͳख࡞ۀͷ࿈ଓ

  10. ࣗಈԽɾޮ཰Խ͢Δखஈ

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

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

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

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

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

  16. /PEFMBOE #SPXTFSMBOE

  17. /PEFMBOE #SPXTFSMBOE

  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

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

  24. /PEFMBOE #SPXTFSMBOE

  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΋ಉ͡ʣ 5JQTTIPSUDVUT % npm install --save <package-name> % npm

    i -S <package-name> % npm remove --save-dev <package-name> % npm rm -D <package-name>
  31. ‣ ݱࡏͷ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" ...
  32. ‣ όʔδϣϯͷڝ߹ͰґଘղܾͰ͖ͳ͍ͱ͖ 5JQTCPXFSKTPOSFTPMVUJPOT Unable to find a suitable version for

    angular please choose one: "resolutions": { "angular": "1.3.0" }
  33. 5BTL3VOOFS λεΫϥϯφʔ

  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. ‣ $444QSJUFTͷੜ੒ ‣ ը૾ͷϑΝΠϧαΠζ࠷దԽ ‣ ։ൃ༻ϩʔΧϧαʔόͷىಈ ‣ ελΠϧΨΠυͷੜ੒ ‣ ςετεΠʔτͷ࣮ߦ

    ‣ +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 JONFNPSZ

  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(SVOUQMVHJOT
  48. ઃఆ͕ංେԽͯ͠ ਏ͘ͳͬͯ͠·ͬͨΒ

  49. ‣ OQN!ͰҾ਺΋౉ͤΔΑ͏ʹͳͬͨ ':*OQNSVODPNNBOE % 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. 5BTLDFOUSJDDPOpHVSBUJPO+40/ઃఆϥΠΫ ౷߹λεΫϥϯφʔͱͯ͠όϥϯε͕ྑ͍ 5BSHFUDFOUSJDDPOpHVSBUJPO+4ίʔυϥΠΫ ϑΝΠϧʹෳ਺ͷॲཧΛ͢ΔϏϧυϓϩηε޲͖ AOQNSVOA͸ҙ֎ʹ࢖͑Δ /PEFKT؀ڥͳΒ࣮֬ʹར༻Ͱ͖ͯखܰˍγϯϓϧ

  54. .PEVMF4ZTUFN ϞδϡʔϧγεςϜ

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

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

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

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

  60. ⚙ #SPXTFSJGZ CVOEMFKT OPEF@NPEVMFT OPEFCVJMUJOT .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 ".% "TZODMPBEJOH

  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".%ʣ " # &OUSZQPJOU "CVOEMFKT #CVOEMFKT DPNNPOKT

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

    DIVOLKT "TZODMPBEJOH " #
  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ϏϧυγεςϜ͸ɹɹɹɹɹɹɹ ޷͖ʹ࢖͍෼͚ͨΒྑ͍ͷͰ͸ ‣ OQNSVOศརͩΑʢݸਓతͳਪ͠ʣ ‣ ࠓ͸$PNNPO+4ελΠϧ͕ϑϩϯτͰ΋Φεεϝ͔΋

    ‣ Ϟδϡʔϧ؅ཧ͸8FC$PNQPOFOUTͱ͔&4ͱ͔ɹɹɹɹɹ ৭ʑ͋Δ͔Β৭ʑมԽ͠΍ͦ͢͏
  79. 5IBOLT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂