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
Tweet

More Decks by Nick DeNardis

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. Updating NPM with NVM $ cd ~ $ npm install

    -g npm@latest $ rm /home/vagrant/.nvm/v0.10.32/bin/npm $ ln -s /home/vagrant/npm/bin/npm \ /home/vagrant/.nvm/v0.10.32/bin/
  4. { "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
  5. bower.json { name: 'new', version: '1.1.0', "description": "A new site",

    authors: [ 'Nick DeNardis <[email protected]>' ], main: 'index.html', license: 'MIT', private: true }
  6. // 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
  7. // 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
  8. 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
  9. # 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
  10. And now.. $ cd ~/Sites/ $ mkdir newsite && cd

    $_ $ yo foundation5-site $ bundle install $ npm install $ bower install
  11. 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
  12. 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)