Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hello npm

904 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Hello npm

  1. 1. hello npm!
  2. 2. me = { name: "muyuu", twitter: "@anticyborg", belongs: "freelance", job: "Web Front-End Engineer" };
  3. 3. • Web • Web /LP
  4. 4. • Web • Web /LP
  5. 5. • • html css js • JS UI •
  6. 6. • UI • •
  7. 7. • •
  8. 8. project_root └ htdocs/ └ src/ └ html/ (index.jade ) └ css/ (style.sass ) └ js/ (main.js ) └ modules/ └ tab/ _tab.sass tab.js
  9. 9. • • src
  10. 10.
  11. 11.
  12. 12. npm
  13. 13. what is npm?
  14. 14. what is npm? • JavaScript • • • NodeJS •
  15. 15. • npm • • • Github • package.json npm
  16. 16. npm • npm • https://www.npmjs.com/signup
  17. 17. npm • npm adduser • username, passwod, emailaddress
  18. 18. • npm • URL • https://www.npmjs.com/package/${name}
  19. 19. • gulp • common.js • github
  20. 20. npm package.json { "name": " ", "version": "1.0.0", "description": " ", "author": " ", "license": " ", "main": " ", "repository": {"type": " ","url": " URL"} }
  21. 21. npm package.json { "scripts": {" ": " "} "dependencies": " ", "devDependencies": " ", }
  22. 22. npm package.json { "files": ["npm "] } .npmignore
  23. 23. npm publish
  24. 24. • ( ) • • push • npm publish!
  25. 25. • • http://semver.org/lang/ja/
  26. 26. • 1.1.1 • ( ).( ).( ) • • •
  27. 27. npm publish
  28. 28. (script ) • npm install packagename -D html <script src="/node_modules/pkg/pkg.js"></script> <script src="/assets/js/app.js"></script>
  29. 29. (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/')); });
  30. 30. (browseiry) • npm install packagename -D • main.js require var pkg = require('pakegename'); pkg();
  31. 31. • Web • Web /LP
  32. 32. • Web • Web /LP
  33. 33. Speee
  34. 34. Speee • • Splatoon • • • • Rails (Ruby Matz )
  35. 35. Speee • • •
  36. 36. Speee • • •

×