Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Refresh Detroit - Frontend Tooling

Refresh Detroit - Frontend Tooling

Building a single website is tough in itself but building and maintaining hundreds of sites results in an exponential maintenance. Luckily there are frontend tools to help, you’re probably already familiar with a few of them and may use them on a handful of projects. We’ll explore how to use frontend tools to make life easier regardless if you’re working on a single or hundreds of sites.

Focusing on the end resulting HTML, CSS and Javascript brings a whole set of new and evolving tools. This discussion will focus on optimizing workflows with Node.js, NPM, Yeoman, Bower, SASS, Gulp, etc. If you use some or none of these tools at the moment this will be a great introduction and use cases to how they can all work in concert with each to publish the best possible websites.

Nick DeNardis

October 15, 2014

More Decks by Nick DeNardis

Other Decks in Programming


  1. Frontend Tooling Nick DeNardis

  2. Perpetual minimalist. User experience crafter. Speaker. Realist. Web Director at

    Wayne State University. Library Scientist. Technical Director for TEDxDetroit. Organizer for HighEdWeb Michigan and Refresh Detroit. Girl Develop It teacher. @nickdenardis Nick DeNardis
  3. 2009

  4. 2013

  5. 2014

  6. Pulling in dependencies suck Lots of dependencies = large pages

    Why did it get this way?
  7. Sprinkled in for fun Workflow

  8. Semantic Versioning SEMVER

  9. Given a version number MAJOR.MINOR.PATCH, increment the: • MAJOR version

    when you make incompatible API changes, • MINOR version when you add functionality in a backwards-compatible manner, and • PATCH version when you make backwards-compatible bug fixes. • Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format. semver.org 1.2.3
  10. http://nodejs.org NodeJS & NPM

  11. https://github.com/creationix/nvm NVM

  12. $ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.2/install.sh | bash $ nvm install stable $

    nvm ls $ nvm use 0.10.32 Installing NVM
  13. Updating NPM with NVM $ cd ~ $ npm install

    -g [email protected] $ rm /home/vagrant/.nvm/v0.10.32/bin/npm $ ln -s /home/vagrant/npm/bin/npm \ /home/vagrant/.nvm/v0.10.32/bin/
  14. npm init package.json

  15. { "name": "new", "version": "1.0.0", "description": "A new site", "main":

    "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT" } package.json
  16. Installing packages https://www.npmjs.org/ npm install bower --save-dev ... "devDependencies": {

    "bower": "~1.3.11" }
  17. Pick up on a new machine npm install

  18. node_modules bower_components .idea .sass-cache vendor .rocketeer/logs/ .gitignore

  19. bower init bower.json

  20. bower.json { name: 'new', version: '1.1.0', "description": "A new site",

    authors: [ 'Nick DeNardis <[email protected]>' ], main: 'index.html', license: 'MIT', private: true }
  21. http://bower.io/search/ bower install foundation --save-dev ... "devDependencies": { "foundation": "~5.4.6"

    } Installing Bower Assets
  22. Private packages "devDependencies": { "foundation": "~5.4.6", "styleguide": "https://github. com/waynestate/styleguide.git#~0.0.3", }

  23. Sass gem install sass

  24. // Import Compass @import "compass"; // Import Foundation Normalize @import

    "../../bower_components/foundation/scss/normalize"; // Import Foundation Global (Functions and Default settings) @import "../../bower_components/foundation/scss/foundation/components/global"; // Import Style Guide Functions @import "../../bower_components/styleguide/global/foundation/v5/scss/functions"; // Import Style Guide and Local Vars @import "../../bower_components/styleguide/global/foundation/v5/scss/vars"; @import "vars"; Only use what you need
  25. devDependencies, compile & build /bower_components/* /dist/styles/* /scripts/* /images/* /fonts/*

  26. touch gulpfile.js gulpfile.js

  27. // Compile all the JS files gulp.task('scripts', function() { return

    gulp.src([foundationJsDir + '/foundation.js', foundationJsDir + '/foundation.topbar.js', foundationJsDir + '/foundation.offcanvas.js', jsDir + '/**/*.js']) .pipe($.plumber()) .pipe($.jshint('.jshintrc')) .pipe($.concat('main.js')) .pipe($.rename({suffix: '.min'})) .pipe($.uglify()) .pipe(gulp.dest(targetJSDir)); }); gulpfile.js
  28. Ruby dependencies for your dependencies Gemfile

  29. source 'https://rubygems.org' gem 'compass', '1.0.1' gem 'sass', '3.4.5' Gemfile

  30. Checking for outdated packages ## Check for outdated Bower components

    bower list bower update --save-dev ## Check for outdated Gems bundle outdated bundle update ## Check for outdated Node modules npm outdated --depth=0 npm update --save-dev
  31. # http://editorconfig.org root = true [*] indent_style = space indent_size

    = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false .editorconfig
  32. node_modules bower_components .idea .sass-cache vendor .rocketeer/logs/ .gitignore

  33. Build projects from the same blocks Yeoman

  34. http://yeoman.io/generators/

  35. And now.. $ cd ~/Sites/ $ mkdir newsite && cd

    $_ $ yo foundation5-site $ bundle install $ npm install $ bower install
  36. Old school Makefile

  37. BOWERFILE := bower.json NPMFILE := package.json GEMFILE := Gemfile COMPOSERFILE

    := composer.json GULPFILE := gulp.js all: install install: bowerinstall npminstall bundleinstall composerinstall update: bowerupdate npmupdate bundleupdate composerupdate status: bowercheck npmcheck bundlecheck build: gulp watch bowerinstall: $(BOWERFILE) bower install makefile
  38. Your Frontend API make or make install (Install all package)

    make build (Build the site and turns on watcher) make check (Check for outdated dependencies) make update (Update all dependencies) make clean (Remove all local packages)
  39. @nickdenardis Thank You