hello npm!

me = {
name: "muyuu",
twitter: "@anticyborg",
belongs: "freelance",
job: "Web Front-End Engineer"
};

• Web
• Web /LP

• Web
• Web /LP

•
• html css js
• JS UI
•

• UI
•
•

•
•

project_root
└ htdocs/
└ src/
└ html/ (index.jade )
└ css/ (style.sass )
└ js/ (main.js )
└ modules/
└ tab/
_tab.sass
tab.js

•
• src

…

…

npm

what is
npm?

what is npm?
• JavaScript
•
•
• NodeJS
•

• npm
•
•
• Github
• package.json npm

npm
• npm
• https://www.npmjs.com/signup

npm
• npm adduser
• username, passwod, emailaddress

• npm
• URL
• https://www.npmjs.com/package/${name}

• gulp
• common.js
• github

npm
package.json
{
"name": " ",
"version": "1.0.0",
"description": " ",
"author": " ",
"license": " ",
"main": " ",
"repository": {"type": " ","url": " URL"}
}

npm
package.json
{
"scripts": {" ": " "}
"dependencies": " ",
"devDependencies": " ",
}

npm
package.json
{
"files": ["npm "]
}
.npmignore

npm publish

• ( )
•
• push
• npm publish!

•
• http://semver.org/lang/ja/

• 1.1.1
• ( ).( ).( )
•
•
•

npm publish

(script )
• npm install packagename -D
html
<script src="/node_modules/pkg/pkg.js"></script>
<script src="/assets/js/app.js"></script>

(concat)
• npm install packagename -D
• gulpfile.js concat
gulp.task("concat", =>{
gulp.src([
'node_modules/pkg/pkg.js',
'src/js/main.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./htddocs/'));
});

(browseiry)
• npm install packagename -D
• main.js require
var pkg = require('pakegename');
pkg();

• Web
• Web /LP

• Web
• Web /LP

Speee

Speee
•
• Splatoon
•
•
•
• Rails (Ruby Matz )

Speee
•
•
•

Speee
•
•
•