Drupal 8 Theming - Part 03 - Gulp.js, Sass, LiveReload

[@krishnashakya2858]

Everything works perfectly fine except for gulp livereload Anyone having trouble with npm in ubuntu 16.04 i opted for version 6 which fixes everything and for livereload just edit the gulpfile.js and watch the whole css folder css/* instead of watching just style.css

[@wikkidev]

yes i too have the same problem

[@davidhrabe9272]

I had some issues on Windows 10, but after doing these steps it worked well: 1. Powershell or Command line run as administrator 2. npm install -g node-gyp 3. npm install --global --production windows-build-tools 4. npm install 5. gulp watch

[@beedesigned]

whenever i run gulp watch i get this error [15:31:10] Starting 'watch'... [15:31:35] Starting 'sass'... [15:31:35] Starting ''... [15:31:35] function done() { d.removeListener('error', onError); d.exit(); return tryCatch(cb, arguments); } reloaded. anyone getting this issue ? the css file gets updated once and when i change _global.scss file again the css files doesnt get updated. struggling with this issue

[@firstbazemmet6813]

Brilliant tutorial. Just what I needed to clear up a lot of cobwebs in my understanding.

[@brianchandler3346]

Thank you so much for creating these. I had a static compiled site using Grunt, Sass, and Jade/Pug and I couldn't find anything comprehensive about how to go about creating a Drupal8 theme from something like that. Now that I know how D8 is interacting with themes better I can totally integrate my build setup. Kudos.

[@ilankir9805]

Great tutorial, thanks a lot for sharing. The Git download does not have the Fonts folder, is it some place else?

[@ilankir9805]

Thanks for sharing. I am working directly on the Hosting server which already contains Drupal 8.9.20. Do I need the "npm install"? What is the "npm" module and where it should be installed? Thanks in advance in case someone answers.

[@ojie12]

Keep up the good work, I like your video very much. I have a problem. am running centos 7 and gulp watch doesn't create styles.css file in css folder nor main.js file in the js folder. Any help or advice would be helpful.

[@McFarahGulled]

Everything seems working fine except i cannot get the CSS folder created by editing _globals.scss 9:50. What am I missing? please assist.

[@edi353]

change all path lines in gulpfile.js example : return gulp.src('./themes/custom/endymion/images/*') change into : return gulp.src('./themes/custom/your_file/images/*')

[@ITisandiamIT]

Great videos and thank you for sharing. I am creating my own themes, and these videos helped me solve some problems I had. Thanks 🙏!

[@WatchandLearnTutorials]

Glad these videos are still useful to someone after 8 years 😀

[@silviopontesx]

Hi Ivan, how to use this command on 8:43 "sudo npm install" on windows 7?

[@_oh_johny]

just without sudo

[@melissagilbert1290]

Hi I'm using mac and when I use gulp watch and change the _global.scss nothing happens and it doesn't make a css folder. can I add it manually or any idea whats gone wrong ? 9:46 of video. thank you

[@FTLOBeats]

had the same issue, got it working by changing the path lines in gulpfile.js example : return gulp.src('./themes/custom/endymion/images/*') change into : return gulp.src('./images/*') because i installed gulp in the root map of the site, now it works for me

[@melissagilbert1290]

OK I'll give that a try thanks

[@FTLOBeats]

lemme know if i can help with anything ;)

[@sushmithakittu4039]

Hi, I have the same issue, I changed the path. But still it doesn't make a css folder. Thanks!

[@sushmithakittu4039]

Hi, I have the same issue. I changed the path but still it doesn't create a css folder. Thanks!

[@machomaaz12]

I was having issues with gulp file so installed RUBY for sass now its more convenient and easy but the JS file is not updating and also the auto re-loader is not working, any method to follow.

[@naveenkumarit6645]

Awesom video... I learnt a lot. Im getting interest to listen to your recordings continously.

[@SergiGambin]

Using Windows, I faced an issue to launch # gulp watch, sorted by installing it globally: # npm install -g gulp Hope this may help someone!

[@jakubkorecko3457]

Thanks man. It really helped.

[@aktief]

thx should be on top :)

[@alexisteo9458]

it works! . Thank you. But I have an error of this: Notice: Undefined offset: 1 in Drupal\Core\Asset\LibraryDependencyResolver->doGetDependencies() (line 53 of core\lib\Drupal\Core\Asset\LibraryDependencyResolver.php).

[@alexisteo9458]

I solved it. Thank you. :)

[@bertanicolau1660]

thanks! It works!

[@dianelacastillomesa6511]

hello watch and learn i like a lot your videos really helpful but I am just having issue with the gulp watch it is saying command not found I have tried even installing npm install - g gulp, but still without work. Please can you advise what could be happening? I am using Mac.

[@jeremyantoine2611]

I had a similar problem. My solution was to ensure that the gulpfile.js and package.json files were in the correct location, (in the /sites folder), then after installing gulp (I used `sudo npm install gulp -g`) I had to run the gulp commands from within my theme_name root folder. then it worked.

[@per-net9911]

Hi Ivan Great tutorial. You helped me a lot to getting started with Drupal 8 theming. Why are you copy the gulpfile.js and package.json in your Drupal 8 root directory? Isn't all the stuff you nee inside your endymion theme folder? I don't like to paste files into the root directory because i’m afraid to delete them unintentionally running updates or copying the files to another location. All the tasks your are running are inside the theme, arn't they?

[@WatchandLearnTutorials]

+Pierre Meyer You can leave those files in endymion theme, no problem. I'm putting them in the root because I'm lazy :) ... so that I don't have to go to my theme folder every time when I want to run "gulp watch" :) that's the only reason.

[@bobbyryandra]

Hi Ivan, How can I install npm at my hosting?

[@WatchandLearnTutorials]

You don't need to do that. You should push your site to hosting with everything already built on your local machine. Lot's of hosting companies won't even let you install anything extra to your account.

[@SafwatGabrplus]

Hello Ivan, First, thank you so much for the great tutorials, this really helped me a lot! I have a question, is there a correct way to embed bootstrap inside my custom theme as I do not want to use bootstrap as a base theme?!

[@WatchandLearnTutorials]

+Safwat Gabr Well just include the bootstrap css and js. Not much to it. I have a video in this series about including Zurb Foundation to your Drupal theme, it's pretty much the same thing. kzbin.info/www/bejne/bJ3CpIGtZZmqr7c

[@SafwatGabrplus]

This is great, many thanks... Keep up this great tutorials ;)

[@alexanderromero7816]

Hi Ivan. I have a problem with _global.css does not recognize the changes I make. But if other files. It may be the gulpfile.js but I'm not sure. What I can do?

[@SergiGambin]

I'm facing the same problem, style.css gets updated but I need to clear cache to see the changes in the front-end. Did you managed to sort this out?

[@Workit91]

I have same problem too, and my background doesn't go black

[@keithalvin16]

@@Workit91 Can you address the problem please it is not resolved thank you. Great video.

[@graemeatg336]

Just in case this might help someone, I had loads of trouble trying to install the modules when running 'sudo npm install'. I couldn't install gulp-sass. I fixed it in the end by downgrading node from version 9 to 6.

[@graemeatg336]

On a mac I should have said - and excellent tutorial series thanks.

[@ruddychristophergarciasolt6863]

excellent tutoturial, congratulations.!! i have a problem , when you execute the command gulp watch and modify the _global.scss the terminal sends me an error message something like : "gulp: symbol lookup error: /var/www....." and when i add the background line, my drupal site is equal without any changes. Could you help me please. thanks

[@ksprdk]

How can I install npm when working on a shared web server? Terminal says "bash: sudo: command not found"

[@WatchandLearnTutorials]

You should not do that. And also on most shared hostings you can't. You should develop everything locally, and then push that to the server, preferably with git, but shared hosting seldom has even git support, so you should upload it via FTP.

[@maximstrutinskuy4892]

Дякую, все зрозуміло. Так тримати!

[@niklaswennerstrand1010]

I have updated to Drupal 8.0.1 and I get another error apart from the missing .svg file and the missing main.js. The error is: /themes/custom/amped/global-js?nz1zgg 404 (Not Found) Have this something to do with Gulp not generating this resourse or is it something with Drupal?

[@WatchandLearnTutorials]

+Niklas Wennerstrand Did you follow this video when doing update kzbin.info/www/bejne/g52vomNrjZqrgdk . I don't think these errors have anything to do with Gulp.js. You are missing some files, global-js and main.js. did you check you theme for those files, are they in the right folders.

[@VadimParfaniuc]

Thanks for video. For some reason I can't make Live Reload working on my instance, do I need to install anything extra as a browser plugin or something? Thanks

[@WatchandLearnTutorials]

+Vadim Parfaniuc Well, you have to have this plugin installed: chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

[@amicoz]

In gulp.watch I have gulp.watch(['./themes/eventcloud/css/style.css',...'']. and there is a css folder at the root of my theme folder's. gulp.watch is running OK. But SASS compiles css files in theme's root, not inside CSS folder. I tried by clearing cache but no luck! Why compiled CSS and map files are not being generated in the root instead of inside CSS folder? OS: Windows 10, Installed Drupal version: 8.2.0 using DevDesktop2. IDE: Atom, Console application: Cmder.

[@dpointeck]

Hey Ivan, great videos, thanks for sharing them with us. I use vagrant as a VM do you know how to get livereload running on that?

[@WatchandLearnTutorials]

You have to run gulp on your host. That is the only way that I was able to get livereload to work with Vagrant. Otherwise It works very spotty.

[@chuangu3061]

Daniel Pointecker

[@tanerfejzulovski428]

Hello Ivan, I have an issue. Followed all the steps and the livereload not working on chrome, I mean the changes done in css are not done on chrome. I have to refresh the page for the changes to take action. What can be the issue? By the way, these series are great and very useful. Thank you!

[@davidricardo8114]

It's happen because livereload just watch the style.css but style.css.map doesn't watched. To resolve this, in gulpfile.js just change './themes/custom/endymion/css/style.css' into './themes/custom/endymion/css/*' Hope this help.

[@danieldewindt3919]

You are awsome!Thanks for sharing knowledge. I have the mindset that huanity has to help eachother witout making financial proffit on every little stupid ting. That's how we will evolve quicker and at the end we all proffit of sharing knowledg. If only governments understood this. Thank you brother.I'm just a poor bastard with a smartphone, willing to learn. Thanks

[@WatchandLearnTutorials]

Nice sentiment. Glad I could help you with my videos.

[@JFlywheel]

Does livereload only work with SASS in drupal? My I have the plugin installed and activated browser will not update when making changes to a css file I pointed gulp to watch. However it seems to work fine when I use SASS... My Team wants to use plain css though, not SASS

[@WatchandLearnTutorials]

No, LiveReload should work with any kind of file. Please check your paths again.

[@ChristianLeovido]

gulp watch runs but doesn't create any files for me. I've checked that I've installed and followed through everything correctly until that point.

[@ChristianLeovido]

Just sorted this by changing the paths to images, css, js, etc. instead of ./themes/custom etc.

[@akayukiwm5266]

hi, I finished this tuto everythings is ok except the LiveReload doen't work for me, am I missing something ?

[@davidricardo8114]

It's happen because livereload just watch the style.css but style.css.map doesn't watched. To resolve this, in gulpfile.js just change './themes/custom/endymion/css/style.css' into './themes/custom/endymion/css/*' Hope this help.

[@ruibinwang1425]

Hi David, you miss the "into" part.

[@Joel202022]

I replaced it with ./themes/custom/endymion/sass/**/*.scss because it didn't want to reload with css and the solution

[@ursulasky]

hi ivan - thank you so much for all your videos - they are amazing!!! when changed the ";" in the main.js file, i got out a olympos.min.js file...where is the name olympos set? i love dan simmons too - you might like ian banks (culture series), john varley and larry niven:)

[@ursulasky]

nevermind! i see you were supposed to delete that at 3:51!

[@WatchandLearnTutorials]

@@ursulasky Hah, glad you solved the problem :) .. Also I've read some books in the Culture series, never heard of John Varley but I will check him out, and of course I've read some of the Nivens books :) . Thanks for the suggestions, I'm always on the lookout for good SciFi books :).

[@bruceclark2277]

Hi I have got as far 8.23 where we install npm using "sudo gulp install". I am not too familiar with the command line but I do have the acquia drush command line and the ordinary windows prompt cmd line. Using either I keep getting an unrecognised command response. I have put the gulpfile.php and package.json in the main site file where we have Assets, Core, modules etc and have followed meticulously everything up to now ... it would be a shame to give up at this point ... any help?

[@WatchandLearnTutorials]

+Bruce Clark You don't have to install that if you don't want. An you can follow along without it. But I think that you are probably missing Node.js . So install that first - nodejs.org/en/ and then it should hopefully work.

[@bruceclark2277]

+Watch and Learn +Watch and Learn Thanks for your help - I installed nodejs through the above link, ran the command npm install and it indicated success but I didn't get anything like all the yellow text that you have on your video (9.22) I then ran "npm install gulp" which seems to be successful. Now when I run "gulp watch" I get the "'gulp' is not recognized as an internal or external command" error ... Do you have any ideas? I am on Windows 10 and it has caused me no end of problems - Thanks again for your help

[@WatchandLearnTutorials]

+Bruce Clark Try installing it like "npm install -g gulp" - if that doesn't work try some of the solutions on this page: stackoverflow.com/questions/24027551/gulp-command-not-found-error-after-installing-gulp

[@bruceclark2277]

+Watch and Learn Hi Ivan I am getting there ... I now have gulp watch operating and files css (style, style.css.map) have been created and css changes re vid 10.20 are working but the rest of my styling has disappeared! Looking at source the message reads: "Failed to load resource: the server responded with a status of 404 (Not Found)" with reference to: "blip.dd:8083/themes/custom/fiss/js/main.js?o0gapi" (fiss my custom theme name/ blip where drupal core is placed) When I look into the js folder I noticed nothing there because you/we deleted the content (vid 3.41) However reading in the libraries file do you have "js/main.js" (vid 3.50) but main.js according to vid (4.00) is located in the lib folder. Is there a mistake here? Should the main.js have been moved to the js folder or should libraries.yml be altered to lib/main.js (as well as any dependancies in the gulpfile.js)? Thanks for all your help and sorry if I am leading you on a "wild goose chase"!

[@WatchandLearnTutorials]

+Bruce Clark You just put all of your javascripts in the lib folder. Start "gulp watch" and then pick one of the javascript files in the lib folder, make a small change and then save it. Then gulp should trigger and take all the files in lib folder concatinate them and save just one main.js file into /js folder. That is how it works. And since you didn't run gulp on js you are getting 404 not found for that file.

[@muraligutha8126]

in mac you are giving sudo what i need to give in windows

[@WatchandLearnTutorials]

Probably nothing I would guess. Or maybe you could also use sudo if you are using WLS.

[@dottn2012]

Ivan any special reason to put gulp.js and package.json in the root of Drupal ? I left'em in the root of the theme and watch/compile works fine Livereload does not though, on both major browsers, Firefox and Chrome am on RHEL7 WS

[@WatchandLearnTutorials]

Yeah, the reason is laziness :). This way I cun run gulp straight from the root :) and I don't have to cd into theme root. As for LiveReload. I don't know. Do you have LiveReload extension installed for Chrome?

[@davidricardo8114]

It's happen because livereload just watch the style.css but style.css.map doesn't watched. To resolve this, in gulpfile.js just change './themes/custom/endymion/css/style.css' into './themes/custom/endymion/css/*' Hope this help.

[@SergiGambin]

Something is missing here, css doesn't update on Live Reload, i have to clear cache to see results! It does for page.twig.html. Any ideas on how to solve that?

[@redalt100]

Checkout the previous video, part 02

[@pdcode1069]

Very nice tutorial, but not working for me. i have install all requirement and gulp watch is working but on web page and sass not working, my drupal-8.3.2 version, win 10. am I missing? Thanks.

[@mayb3_mel]

im having a similar issue with 8.3.2 as well

[@muhammadega5981]

i have trouble Cannot find module 'gulp-sass' .... help me please ?

[@WatchandLearnTutorials]

Well just do 'npm install gulp-sass'

[@muhammadega5981]

When I run it python error occurred on windows 10, and I have run it turns out the error is in powershell. Thanks for answer sir

[@benjohnson4789]

Hi Ivan How do i run a terminal on a local machine. I want to learn sass on my development machine for a drupal site. i seem to be on a wild goose chase eg I would like to run gulp watch like you do so i need gulp & node.js & puTTY & cygwin & openssh server & a key etc etc I'm vanishing into a rabbit hole. Is it possible to tweak sass/update css without all these tools?

[@WatchandLearnTutorials]

+Ben Johnson Hmmm, you should run termnial on your local machine so you don't need openssh, cygwin, putty and keys :) . You don't need node.js and gulp either on your production server just have to install them on your local machine.

[@benjohnson4789]

+Watch and Learn Hey thanks for the quick reply. I thought puTTY was the terminal. If I don't need that how do I access the terminal? sorry newbie here :)

[@WatchandLearnTutorials]

+Ben Johnson I guess you are running Windows, right? In Windows it's called command prompt. That is your terminal. But command prompt generally sucks. So I would suggest you install git for windows: git-scm.com/downloads and use git shell. I never used it, but a lot of guys on Windows in my company are using it instead of command prompt. And say it's great. The other option would be to install Vagrant box, and your commands from there. I have tutorials about that, so you can check them out on my channel.

[@benjohnson4789]

+Watch and Learn Yes windows. Command Prompt...Got Ya! Great, many thanks, to focused on the detail and missed the obvious! I'll take your advice and start with Git. Great videos by the way, learning lots!! :)

[@nitinlama]

Facing deprecated issue while installing gulp dependencies with npm install. Please help me. Anyone. :'{

[@WatchandLearnTutorials]

Yeah, this is an old video, I don't think gulp configuration will work with new versions of Gulp. Also try using BrowserSync instead of LiveReload. You can use any other build tool instead of Gulp, like Webpack or Laravel Mix. Or check out Gulp documentation to see how to setup our configuration.

[@fastaba]

i have almost none idea of the comand line windows someone can help me. If i open the command line on windows it appears on c directory and when i try to apply the entrys dont recognise the instructions. i intuit that im in the wrong directory to apply the comands. Some help?

[@sahandzend]

you will need to download Node.js and install it on your windows computer. Then use the program Node.JS command prompt that would have been installed on your system. I am at that point and still trying to figure out fixing issues with gulp-sass missing as a module, even when i run the command to install that specific module. i think its installing in the wrong location, but i am in the correct directory location. -_-

[@craigmcgowan8746]

Hi Ivan, Thanks for all your great work! I can't seem to get the npm install to work. When I type sudo npm install I get: "sudo: npm command not found". What am I missing?

[@craigmcgowan8746]

Disregard, I just needed to install node.js. Thanks again for all your hard work!!!

[@rawanghanem4314]

I'm using windows 10 how can i do every thing ..is there anyone can help

[@sebatorresi]

Hello! Great tutorials. I'm having some issues with livereload, twigs and css. Everything "reload" fine but the thing is that when i save my css it reload fine, when i save a .twig it reload fine also but it will reload with some old css styles. I've expended lot of time looking for this to make it work but can't find nothing that helps. Anybody with the same problem? Thanks

[@alexisteo9458]

Dear Ivan ... After I set up the gulp.js, sass and lifereload... The whole theme went to plain layout with all the contents and blocks on the top left corner. So I opened the page source under console, it said jquery.min.js?v=2.2.3:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org/.send @ jquery.min.js?v=2.2.3:4

[@markfromtls3460]

hey Ivan, thanks so much for this tutorial. I have learned a lot. I am using Ubuntu 14.04 and I am having issues getting 'gulp watch' to work. When I run the command it comes back "/usr/bin/env: node: no such file or directory".

[@markfromtls3460]

+Joseph Richardson ok I got it working. I have watched some videos on Gulp. I will return to following the rest of the videos. I am trying to absorb everything on D8 I can. Thanks for these videos again!

[@DoomDesign]

Hey there, great tutorial! But one thing I saw is, you merged modernizr with your other JS, so it gets included in the bottom of your page. As far as I know, it is a best practice to include modernizr in the head of the page (and every other JS in the bottom). Maybe that's one thing you could change in your otherwise great workflow!

[@WatchandLearnTutorials]

+DOOM Design You are probably right. I just wanted to demonstrate concatinating of all the scripts. Thanks for suggestion.

[@ivagora]

This is great! But I don't understand where you put gulpfile.js and package.json files.

[@WatchandLearnTutorials]

It's explained in the video. But you can put those file where ever you want and then adjust the paths in gulpfile.js . My suggestion would be to put gulpfile.js in the root of your site. Because that's how it is in the video.

[@souravmandal7527]

how do i get that kind of autocomplete in my terminal of ubuntu!

[@ivan747]

It's fish shell: fishshell.com/

[@souravmandal7527]

thank you very much

[@doughurt658]

Good series so far. Getting everything setup for Gulp in VS Code is not straight forward and needed a lot of tweaks to get it working.

[@WatchandLearnTutorials]

Glad you got it set up. Unfortunately I would say that this setup is a bit outdated. It's been 3 years. Now I would use something like Webpack or Laravel mix for that. And instead of Livereload I would use BrowserSync. Check out my channel, I have a few videos about the subject using more modern technologies. Although I don't use Drupal in them.

[@eardles]

I have now discovered that everything works fine if i do not add any of the partials. This is the case whether I use a Drupal install or just an HTML site.

[@tranbaohuy6865]

Great tutorial, but when i run npm install to run gulp.js file, have some errors with me. npm WARN deprecated gulp-uglifyjs@0.6.2: Since gulp-sourcemaps now works, use gulp-uglify instead npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. My node -v is 7.6.0 npm -v is 4.1.2 Help me, plz

[@relaxdaddy1219]

what is the command in windows for "gulp watch"

[@WatchandLearnTutorials]

Well it's gulp watch also. Do you have Node.js and Gulp installed on your system?

[@relaxdaddy1219]

Thanks for the reply.. im having hard time to have live reload.. I'll try later to install it.

[@relaxdaddy1219]

not working still

[@WatchandLearnTutorials]

I don't use Windows so really can't help you with that. Maybe ask at Stack Overflow.

[@relaxdaddy1219]

I already installed node and gulp but still don't work. But anyways thanks for your time. God bless brother

[@joshuakincheloe]

Why use live reload instead of browser-sync which is free? I know it's a preference, but browser-syncs free ;) Can you post a gulp file with that plugin being used instead? It would help me out. I'm used to codekit.

[@JMUkikster]

Did you figure out how to do browser-sync? I'm trying to figure that out and such as livereload isn't working for me. And I don't want to pay for that app:) If you did figure it out, would you mind sharing your gulpfile.js?

[@eardles]

What a great video series, but I am having trouble with part three. I am on windows 10 and whenever I try to use gulp-watch I get a copy of my css file in my sass folder. This causes a gulp error telling me that gulp does not know which partial to use, globals.css or globals.sass. the global.css file is sent to my sass folder instead of my css folder. I have copied your zip file from github. If I run just gulp sass I get exactly the same problem, ie thecompiled css file is sent to my sass folder. I have been trying various fixes for this, but with no luck. Any ideas? Thanks.

[@WatchandLearnTutorials]

+John Eardley Are you sure you are using files from GitHub? Because you shouldn't have globals.css files compiled. Because that file is a partial and it should be compiled down to style.css and not to global.css. Something is definitely not right with your configuration. Try copying files from github. Move gulp.js and package.json to the root of your Drupal install. And in the root run "npm install". Then run gulp watch and see what happens.

[@eardles]

+Watch and Learn I have done exactly as per your instructions and even started with a fresh Drupal install. I get the new css file exactly where it should be (in the css folder), but I still get a copy of the css file in the sass folder I get the same error: "It's not clear which file to import for '@import "g;obals"'. Candidates: -globals.scss -globals.css Please delete or rename all but one of these files on lin 11 of stdin >>@import "globals"; If I delete the globals.css file (and the globals.css.map), gulp watch allows me to make a change again, but still re-produces the files in the scss folder. Also the livereload does not work although I have livereload enabled in the browser. If I do a manual browser refresh I can see my change (Background from old to new color).

[@WatchandLearnTutorials]

+John Eardley This makes no sense to me. Tell me something - when you open "sass" folder do you see "_globals.scss" file in it? And notice the underscore. The only reason why you would get this weird behaviour is if for some reason the files in sass folder don't have underscores.

[@eardles]

+Watch and Learn my sass folder looks like this: sass susy -fonts.scss -footer.scss -globals.scss etc. my styles.scss folder looks like this: @import "susy"; @import "su"; etc. After I run gulp watch I see the change in the css folder (I change the body color to red or some other color) and the sass folder now has the following in it: style.css style.scss style.css.map In my css folder I get: style.css style.css.map When I make a change now to my global.scss file I get the gulp error as shown in my previous post. I found this query and wonder if anything in there could throw any light: github.com/sass/node-sass/issues/215

[@WatchandLearnTutorials]

+John Eardley Files in the sass folder must have underscores. So "globals.scss" must be called "_globals.scss" with an underscore before the name. Only file without underscore should be style.scss.

[@naradamanfrida1429]

It's a shame that we can't follow through because of the multiple deprecations problem...because really, is a seriously interesting course and the one and only that goes deep into the theming section of Drupal. Please consider to make one updated version of it!

[@WatchandLearnTutorials]

You can skip this video if you can't get Gulp and so on to work. Although since this tutorial has been made almost 6 years ago it would be better to use something like Webpack or maybe Laravel Mix or even the new version of Gulp. As for the updated version... no... I'm not touching Drupal ever again :)

[@naradamanfrida1429]

@@WatchandLearnTutorials ...yeah I know exactly what you mean, I hope I can push through the project I was assigned and then never ever touch Drupal ever again in my life

[@WatchandLearnTutorials]

@@naradamanfrida1429 Hehe 😀

[@lovelifefamily2021]

​@@naradamanfrida1429why you don't want to touch Drupal again ?

[@naradadiastora5824]

@@lovelifefamily2021 my vision shifted in the last two years (when I left the comment you're referring to), I continued working with it but still Drupal has some obscure information for people who are not already kinda expert on using it and, to add insult to injury, information is scarce and unclear...that's why I was frustrated and still am sometimes, but I'm a fulltime Drupal developer for about three years now so I guess I managed to understand some things, yet some other things are way off my reaching

[@marlenkarakushi6364]

anyone help on centos7 how to insatll npm and gulp???

[@FTLOBeats]

maybe this will help : e9p.net/installing-gulp-centos-65-rhel6

[@anipvin]

how to launch # gulp in windows 10? can anyone help?

[@djwave28]

I went through a pain running npm install on your current package.json with "gulp-sass": "^2.0.4".... After taking out the line and install gulp-sass independently with 'npm install gulp-sass' I ended up with "gulp-sass": "^4.0.1" .. After that npm install command worked fine. .. Linux ..You might want to update that file. Apparently version ^3.0.0 works fine. And again thanks... Your videos are helpful.

[@JenniferMartinezLove]

Your comment was so helpful for me, thank you so much I was stuck hours until I tried your solution.

[@joseluisfernandez5981]

It is possible to continue the Tutorial without gulp.js, Sass and LiveReload??..... I´ve been trying but can´t get gulp working. Edit: gulp is working nice now.

[@WatchandLearnTutorials]

Sure. you don't need any of that, also, you should probably use something else in 2020 (Webpack, Laravel Mix, BrowserSync etc.)

[@joseluisfernandez5981]

@@WatchandLearnTutorials Thank you so much for your answer. I´ll keep going then :) and later on check this other technologies you´ve metioned.

[@EditsByLee]

Great Tutorial series!

[@fsarmiento82]

Great tutorial brother, thanks for share it !

[@AndrewTonneman]

What about 'sudo'? This part is quite obscure to me. BTW: nice tutorial - thx.

[@WatchandLearnTutorials]

+Andrew Tonneman Well if when you run 'npm install' you get errors then you should run it like this 'sudo npm install'. sudo means to run a command as root user, that way you won't have problems with permissions. Of course if you are on Windows I don't think you would be needing that.

[@AndrewTonneman]

+Watch and Learn Well, I'm on Windows. I shall watch your video again and see if that changes my perception, because I'm still uncertain about what you're actually installing...

[@WatchandLearnTutorials]

+Andrew Tonneman You are installing modules that are required for gulp.js to work. If you don't do that you won't have any sass compilation, livereload etc. You of course have to have node.js installed on your machine.

[@AndrewTonneman]

+Watch and Learn Thx Ivan.

[@MegaBenjo26]

Permissions issues even using sudo: I can't install Node-Sass. I'm using $ sudo npm install. There seem to be basically three errors involved: - (Node-Sass): mkdir EACCESS -> Unable to save binary to node_modules/node-sass/vendor -> Permission denied - (Node-Gyp): mkdir EACCESS -> Configure error / permission denied -> node_modules/node-sass/build - (Node-Sass): ELIFECYCLE (I'm guessing this is just the consequence of the above). High Sierra 10.13.3 Gulp 3.9.1 Node 9.5.0 Sass 3.5.5 (Is this even relevant? Sass is not LibSass, and Node-Sass (which I presume comes bundled with Node) comes with LibSass. So probs irrelevant but there you go. Thanks for the great videos!

[@MegaBenjo26]

Worked around by placing the htdocs in a user-level directory.

[@FTLOBeats]

could not install gulp and had to do this to get it to work(im on w8.1) : -download and install node.js -go to this pc > right click on "thispc" and open properties > advanced systemoptions > open Environment Variables (bottom) > edit "PATH" to C:\Users\*user*\AppData\Roaming pm;C:\Program Files odejs > press ok > press ok > press ok -After that reboot your pc -Then open cmd > use the "cd" command to go to your file dir where your site is. - excecute the command "npm install gulp" Now it should install, atleast that did it for me. hope this helps anyone EDIT--- gulp watch does not seem to work for me, get error about gulp-reload EDIT-- so after allot of shit and throwing around my laptop I got "gulp watch" to work : -go to your dir with cmd. -type in npm install gulp-livereload -type in npm install gulp-uglifyjs -type in npm install gulp-sass -type in npm install gulp-autoprefixer -type in npm install gulp-sourcemaps -type in npm install gulp-imagemin -type in npm install imagemin-pngquant EDIT-- change file paths for it to work if you use this method : -return gulp.src('./themes/custom/endymion/images/*') is the original path, change it to -return gulp.src('./images/*') Because I installed gulp in the root folder of my site it didnt change anything. now it works like a charm !

[@marlenkarakushi6364]

thanks for the help . have you tried on centos 7?

[@FTLOBeats]

No im on windows, I did use centos before but not for drupal 8

[@marlenkarakushi6364]

after all the installs i still cannot run gulp watch. is there anything i am missing? node_modules are installed on C:\inetpub\wwwroot\drupal8 ode_modules one sapmle C:\inetpub\wwwroot\drupal8 ode_modules\gulp-sass ode_modules ode-sass\vendor\win32-x64-46\binding.node

[@FTLOBeats]

Im not sure, I don't use Centos so I can't really say. All I can say is make sure that all the paths are correct, and that you install all the modules gulp requires

[@marlenkarakushi6364]

Thanks a lot . A got around it by installing with command, npm install gulp-cli -g I highly recommend it in Windows envrionment

[@sinouhefouqueau1844]

thank you for all those videos

[@mathewi2761]

what is the point of using sass?

[@syntax_error_158]

Writing less code

[@niklaswennerstrand1010]

Fantastic tutorials! I just got to a halt and could not find a solution by using google. Maybe someone here can help with my issue? When I enable the Gulp thingy on my development folder I got a couple of warning and then the installer just sat there ideling and doing nothing. Had to force stop it. The warning was the following: $ sudo npm install npm WARN deprecated gulp-uglifyjs@0.6.2: Since gulp-sourcemaps now works, use gulp-uglify instead npm WARN deprecated lodash@1.0.2: lodash@

[@WatchandLearnTutorials]

+Niklas Wennerstrand Did you try to run "gulp watch" and check if it runs anyway. I get those same warnings, but everything works fine. Also try to update Node.js maybe that is the problem.

[@niklaswennerstrand1010]

+Watch and Learn I installed Node v4.2.3 LTS Mature version before my issue. Now I have updated to Node v5.1.1 Stable Latest and the install do not stop any more. I still got the warnings but it seams to work by installing Node v5.1.1 before sudo npm install. Thanks! :-) Just another note. To make it to work you also need to remove the folder node_modules before you run "sudo npm install". the npm install will then create a new working folder with the same name and after that you can run "gulp watch".

[@JaredBishop]

-bash: gulp: command not found

[@jeremyantoine2611]

You have to install gulp if you dont have it already.

[@MuhammadImranJutt]

Great job! Thank you.

[@ahmadaziz1800]

I recommend using laravel elixir

[@claudiusrauter]

great vid buddy!!

[@artsworkcn]

Thank you very much!

[@christianlefournis1557]

Thank you.

[@carlosbensant]

First of all, I love to work with Gulp, but this time I've been using Webpack/Laravel Mix instead. gist.github.com/carlosbensant/d6b8336e67a0b71877d923a4771f519b I stopped the video to leave you a comment about where I saw you to put your gulpfile. I preferred to place them inside the theme and not outside, why? because what does it do outside? If I'm going to move my theme to another project, I'd just have to move the theme and not other files with it.

[@WatchandLearnTutorials]

I think I said it in the video, you can put it wherever you want. I usually put it in the root because of pure laziness, that way I don't have to cd into the theme. Either way is fine.

[@carlosbensant]

Thank you for your quick reply. Yes, you did a mention about where to put them. I agree as well on the fact to avoid overusing 'cd'.

[@pogrebnoimaksim]

с первой секунды понял что ты русский)

[@ericrubino8975]

Is it possible to create themes not using automation tools (NPM)? I am on a Govt PC which uses a proxy and tools like NPM, Composure return https errors because they can't reach the external servers.

[@dddoi]

Great job! Thank you.