NPM, GRUNT E BOWER: IL NUOVO PACKAGE MANAGER DI VISUAL STUDIO 2015
Modernizing Your WordPress Workflow with Grunt & Bower
-
Upload
alan-crissey -
Category
Technology
-
view
1.863 -
download
1
description
Transcript of Modernizing Your WordPress Workflow with Grunt & Bower
![Page 1: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/1.jpg)
MODERNIZING YOUR WORDPRESS WORKFLOW
WITH GRUNT & BOWER
![Page 2: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/2.jpg)
WHAT WE'LL COVERGetting used to the terminalManaging project plugins & frameworks with BowerCreating tasks in Grunt that will process our CSS, minify andconcatenate our JavaScript, optimize images, and refresh ourbrowser instantly
![Page 3: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/3.jpg)
COMMON PROBLEMSFOR THEME DEVELOPERS
HTML / Template ManagementCSS ManagementJavaScript ManagementCSS / JavaScript Concatenation / MinificationImage OptimizationLive Browser UpdatingLocal Server Environment
![Page 4: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/4.jpg)
TOOLS TO HELP WITH THESE PROBLEMSHAML, JADE, SLIM, MarkdownLESS, SASS, StylusCoffeeScript, LiveScriptWordPress Plugins, GUI Apps - CodeKit, Koala, HammerMAMP, LAMP, XAMPP
![Page 5: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/5.jpg)
PROBLEMS BOWER SOLVESJavaScript Plugin / Framework Management & Updating
![Page 6: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/6.jpg)
PROBLEMS GRUNT SOLVESAll the Rest
![Page 7: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/7.jpg)
GRUNT ADVANTAGES OVER GUISPortable with ProjectConfigurable for Multiple Environments (dev, dist)Every Detail is Customizable
![Page 8: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/8.jpg)
FOLDER STRUCTUREhtml // your public folderassets // the files you will be editing└─ less└─ js└─ imgbower_components // home to your Bower packagesnode_modules // home to your Node packagestmp // holds concatenated js to lintbower.json // the list of your Bower packagespackage.json // the list of your Node packagesGruntfile.js // where the Grunt magic happens
![Page 9: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/9.jpg)
TERMINAL SETUP FOR FUN++1. Get .2. Install with
3. Install with
4. Get Homebrew up to date and clean by running brewupdate and brew doctor, then add it to the path with
5. Install Node.js with brew install node6. Install the Grunt CLI with npm install -g grunt-cli7. Install Bower with npm install -g bower
iTerm2OhMyZsh
curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
Homebrewruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)
export PATH="/usr/local/bin:$PATH" >> ~/.bash_profile
![Page 10: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/10.jpg)
BOWER SETUPCreate a file called bower.json.
{ "name": "your-project-name", "version": "1.0.0", "dependencies": { }}
![Page 11: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/11.jpg)
GRUNT SETUPCreate a file called package.json.
{ "name": "your-project", "version": "1.0.0", "dependencies": {
}}
![Page 12: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/12.jpg)
GRUNT CONFIGURATIONCreate a file called Gruntfile.js.
'use strict';module.exports = function (grunt) {
grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),
// package options will go here
});
// register tasks here grunt.registerTask('default', [ // default actions go here ]);
};
![Page 14: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/14.jpg)
CSS PREPROCESSINGYou'll want the , , or some other package if your CSS
preference is different.LESS SASS
npm install grunt-contrib-less --save-dev
ornpm install grunt-contrib-compass --save-dev
![Page 15: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/15.jpg)
JAVASCRIPT LINTINGGet .JSLint
npm install grunt-jslint --save-dev
![Page 16: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/16.jpg)
JAVASCRIPT FILE CONCATENATIONYou'll want .this
npm install grunt-contrib-concat --save-dev
![Page 17: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/17.jpg)
JAVASCRIPT MINIFICATIONGet .Uglify
npm install grunt-contrib-uglify --save-dev
![Page 18: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/18.jpg)
ERROR NOTIFICATIONSTry .Grunt Notify
npm install grunt-notify --save-dev
![Page 19: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/19.jpg)
IMAGE OPTIMIZATIONI like .Imagemin
npm install grunt-contrib-imagemin --save-dev
![Page 20: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/20.jpg)
LIVE UPDATINGYou want to use . For updating CSS and JavaScript in the
browser without refreshing the page, get the Chrome extension.
Watch
LiveReloadnpm install grunt-contrib-watch --save-dev
![Page 21: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/21.jpg)
For WordPress, you'll want the .
SERVERWant to set up a node.js server for your project and ditch
MAMP? Get .Express
PHP version
![Page 22: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/22.jpg)
With the packages you want registered, the 'Load Tasks' sectionof your file should look something like this:
// Load tasksgrunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-notify');grunt.loadNpmTasks('grunt-contrib-watch');grunt.loadNpmTasks('grunt-contrib-imagemin');grunt.loadNpmTasks('grunt-contrib-compass');
![Page 23: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/23.jpg)
CONFIGURING OPTIONS// package optionsjshint: { options: { jshintrc: '.jshintrc' // jshint config file }, all: [ 'Gruntfile.js', 'assets/js/*.js' ]},concat: { basic: { src: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/foundation/js/foundation/foundation.js', 'assets/js/main.js' ], dest: 'tmp/app.js' }, extras: { src: [ 'bower_components/modernizr/modernizr.js' ], dest: 'tmp/modernizr.js' }},compass: { dist: { options: { config: 'config.rb'
![Page 24: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/24.jpg)
WATCHA sample configuration:
watch: { compass: { files: ['assets/sass/**/*.{scss,sass}'], tasks: ['compass'] }, css: { files: ['public/build/css/*'], options: { livereload: true } }, js: { files: [ 'assets/js/*.js' ], tasks: ['concat', 'uglify'], options: { livereload: true, atBegin: true } }, imagemin: { files: [ 'assets/img/**' ], tasks: ['imagemin'], options: {
![Page 25: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/25.jpg)
REGISTER DEFAULT TASKS// Register default tasksgrunt.registerTask('default', [ 'watch']);
![Page 26: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/26.jpg)
PUTTING IT ALL TOGETHERWith all of these modules registered and configured, your
Gruntfile.js should look something like this:'use strict';module.exports = function (grunt) {
grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),
// package options jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', 'tmp/js/*.js' ] }, concat: { basic: { src: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/foundation/js/foundation/foundation.js', 'assets/js/main.js' ], dest: 'tmp/app.js' },
![Page 27: Modernizing Your WordPress Workflow with Grunt & Bower](https://reader034.fdocuments.net/reader034/viewer/2022051313/547e9f85b4795984508b4b8a/html5/thumbnails/27.jpg)
GO PLAY