Creating a drupal 8 theme with node.js, libsass, gulp & browsersync
Download as PPTX, PDF
1 like1,499 views
This document discusses creating a Drupal 8 theme using Node.js, LibSass, Gulp, and BrowserSync. It outlines installing Node.js and necessary modules like Gulp and Gulp-Sass. The Gulpfile configures tasks for Sass compilation, JavaScript, images, Twig, and BrowserSync. BrowserSync helps test the site on multiple devices. The theme structure and adding CSS/JS assets to Drupal 8 are also covered, along with debugging tools. Source code for an example theme is provided, and contact info is given to ask questions.
![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](https://image.slidesharecdn.com/vbuuduhtt4619lnpiajt-signature-9a65546f488cdcdfdb3a2ca86ec7e9da8ee21cd443d97c1622964735bb9ec829-poli-150116181712-conversion-gate02/85/Creating-a-drupal-8-theme-with-node-js-libsass-gulp-browsersync-11-320.jpg)
Creating a drupal 8 theme with node.js, libsass, gulp & browsersync
- 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. Its 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
Editor's Notes
- #4: Global Sprint Weekend is coming to a city near you on January 17th
- #5: Using Bundler
- #7: Explore core themes Classy - remove classes from core
- #8: npm install gulp -g npm install gulp --save-dev
- #9: Setup tasks to watch & compile sass, js, img, twig, browsersync
- #12: Template will be surrounded by HTML comments. Twig templates are automatically recompiled whenever the source code changes (see auto_reload below). Check out core for structure and examples