2016年、初夏のJavaScript祭で発表したスライドです

1. hello npm!

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

3. • Web
• Web /LP

4. • Web
• Web /LP

5. •
• html css js
• JS UI
•

6. • UI
•
•

9. •
•

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

11. •
• src

12. …

13. …

14. npm

15. what is
npm?

16. what is npm?
• JavaScript
•
•
• NodeJS
•

17. • npm
•
•
• Github
• package.json npm

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

19. npm
• npm adduser
• username, passwod, emailaddress

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

21. • gulp
• common.js
• github

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

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

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

26. npm publish

27. • ( )
•
• push
• npm publish!

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

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

31. npm publish

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

34. (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/'));
});

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

36. • Web
• Web /LP

37. • Web
• Web /LP

38. Speee

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

40. Speee
•
•
•

41. Speee
•
•
•