Search the Community
Showing results for tags 'gulp'.
Found 4 results
-
I'm working on a site that uses the front-end tooling set-up from https://github.com/nystudio107/craft It uses package.json for defining all the Gulp plugins and paths as described in https://nystudio107.com/blog/a-better-package-json-for-the-frontend I've been able to convert it for use with my Processwire project but I'm a bit confused about how the Critical CSS part works and how to map URLs to templates. I've also found https://processwire-recipes.com/recipes/inline-critical-css/ which uses Grunt but again, it's not clear to me how it handles all the templates. Has anyone got a similar set up working and would you be able to share your package.json or gulpfile?
-
What build tools do people use with processwire? Most build tools I have tried are either solely designed for single-page applications or don't support bundling npm packages. So far, I have been downloading third-party libraries and including them in my html. While this works, it isn't great when you want to update to a newer version. It also involves committing often hundreds of files not associated with the project when using git. For this reason, I would like to use a package manager to handle all of the updating for me and keeping my git directory nice and clean. After doing some research, it seems that npm is by far the most popular package manager. I find this strange considering it was designed for ndoe.js which is server side software but I can look past that. I have had some experience with webpack when I was learning how to use Vue.js for making single page applications. For that purpose, it worked pretty well but was also extremely confusing at first. Everywhere I go I see webpack being recommended as the number one build tool for front-end web applications. However, I have struggled to get it working with anything that isn't a single-page application. It seems to be designed to bundle everything into one or two js files. This doesn't really work in a setup like processwire. I would like to be able to import certain css and js into pages only as needed. For instance, if I only need a slideshow on one page, it doesn't make sense to include the code that does that on every page. That's not to say you won't have some global css and js. I additionally don't like how complicated it is to setup a webpack project and how webpack imports css inside js files. I decided to try Brunch which boasts being simpler than other build tools, including webpack. I must say, I am fairly impressed with it so far with it's ease of use. But I once again ran into the problem of it being designed for single-page applications. For example, I wanted to use lightbox on a few pages. After installing it from npm, I couldn't figure out a good way to include it's css. Brunch has a setting that let's you include styles from npm packages but it includes them globally. This means every single processwire page would have css for displaying lightboxes even when I don't need them. This would work but seems to go against the whole idea of being modular. I am also trying to use uikit as an npm package to no avail. I found somebody else with similar issues but was never answered: I noticed that ryan opted to just include a static version of uikit in AdminThemeUikit. Is this the recommended way of doing things? Have I got it all wrong? Doesn't this introduce pains whenever uikit needs updating? All I want is a better way to handle all my dependencies. I have been looking for the correct way to do this and it's beginning to drive me insane
-
Hi guys, I have replicated my local gulp workflow on a digitalocean droplet, and I can't seem to get browsersync to work. Has anybody tried this before and can chime in? My PW install is at http://clients.domain.com/clientname/ In there, my folder setup looks like this, so gulp runs from the /templates folder: clients + public + clientname + site + templates + node_modules + gulpfile.js + package.json + src/ + assets/ I tried all kinds of shenanigans including leaving out any proxy settings, setting a proxy, different port and fiddling with the scriptPath options... gulp.task('browser-sync', function(){ browserSync.init({ scriptPath: function (path, port, options) { return options.getIn(['urls', 'external']) + path; } }); }); // or this: gulp.task('browser-sync', function(){ browserSync.init({ host: 'XX.XX.XX.XX', open: 'external', proxy: 'clients.domain.com/clientname/' }); }); Gulp and browsersync is running fine it seems, only the integration is tricky: I get timeouts or 404s with the auto generated snippet (apparently the relevant files are created dynamically on runtime, but I can't access or see them at the default paths) I'm probably missing something very obvious, can't be this hard, can it? - - - EDIT: Could this simply be a firewall issue? - entering the IP @ Browsersync's default port (3000) doesn't load anything - I used serverpilot to configure the machine so the firewall is set up with very few ports open, and obviously 3000/3001 is not one of them. I guess I'm off to find out if opening one of these ports is a good idea or not - - - EDIT 2: When running netstat -peanut I can see that the relevant ports are actually listening, so this is not a firewall issue after after all? tcp6 0 0 :::3002 :::* LISTEN 1000 184931 17882/gulp tcp6 0 0 :::3003 :::* LISTEN 1000 184942 17882/gulp
-
