1. CREATING DRUPAL 8
THEME WITH NODE.JS
LIBSASS, GULP &
BROWSERSYNC

2. Hello!
MY NAME IS ANDREI
I am a Front End Developer at Appnovation
Find me at: @zetagraph

3. Drupal 8
Time to explore and start adopting
8.0.0-beta4

4. D8 & FE TOOLS
Using node.js & gulp.js in theming workflow

5. PORTICO
Internal Project. An annual competition for technology
focused post secondary students
Place your screenshot here

6. D8 THEME STRUCTURE
○ .info.yml - file
○ .libraries.yml - file
○ .theme - file
○ scss - partials structure
○ package.json
○ node_modules
○ gulpfile.js

7. NODE.JS
○ brew install node
○ npm init - create package.json
○ npm install
○ fetch node modules - gulp, gulp-sass, etc
○ add node_modules to .gitignore

8. GULPFILE.JS
○ require dependencies
○ tasks for sass, js, img, twig, browsersync
○ gulp it to compile, watch & browsersync

9. BROWSERSYNC
BrowserSync is similar to Livereload, however it helps
you test your site on multiple devices over a shared
network by synchronising URLs, interactions and code
changes across multiple devices. It’s wicked-fast and
totally free.

10. ADDING JS AND CSS ASSETS TO A
DRUPAL 8 THEME
○ Deleting or overriding existing styles served by core
○ Declaring dependencies
○ Specifying scope of a JS (footer)
○ Specifying media type
○ Conditional CSS or JS for older IE browsers
○ Bringing in an external JS or CSS resource
○ Adding or limiting a library to specific pages

11. DEBUGGING TOOLS IN D8
Get template file name suggestions by enabling debug.
○ In D8 set "debug: true" in sites/default/services.yml
while developing
○ In D7 (7.33) add $conf['theme_debug'] = TRUE;
to settings.php

12. SOURCE
CODE
Example theme source code:
github.com/zetagraph/monoset

13. THANKS!
Questions?
Connect:
twitter & github: @zetagraph
blog: appnovation.com/blogs/azvonkov
email: andrei@appnovation.com