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