gulp-pug | Gulp plugin for compiling Pug templates
kandi X-RAY | gulp-pug Summary
kandi X-RAY | gulp-pug Summary
Gulp plugin for compiling Pug templates
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of gulp-pug
gulp-pug Key Features
gulp-pug Examples and Code Snippets
Community Discussions
Trending Discussions on gulp-pug
QUESTION
The plugin gulp-pug
allows to pass global variables to pug files via data
property.
What if we don't need full data set in each .pug
file? To implement conditional data injection, we need to access to current vinyl
file instance inside pipe(this.gulpPlugins.pug({})
or at least to know the source file absolute path. Possible?
ANSWER
Answered 2020-May-05 at 11:53You'll need to modify the stream manually - through2 is probably the most used package for this purpose. Once in the through2 callback, you can pass the stream to your gulp plugins (as long as their transform functions are exposed) and conditionally pass them options. For example, here is a task:
QUESTION
Now I'm using gulp-pug
...ANSWER
Answered 2020-Apr-15 at 20:13I've published an npm package and gulp plugin here to address this exact issue: https://www.npmjs.com/package/gulp-url-builder
Original AnswerI had the same desire and wrote a function that uses gulp-rename to rewrite the file paths as they're being processed.
After you run pug()
, run rename()
with this function:
QUESTION
I make some kind of mistake when extended TypeScirpt interface IGulpPlugins
from type definitions for gulp-load-plugins, or incorrectly defined types of gulp-postcss.
According comment in index.d.ts
of @types/gulp-load-plugins:
ANSWER
Answered 2019-Apr-09 at 05:36There are 2 things you didn't get right.
- You made a typo, or maybe don't understand how
gulp-load-plugins
works.
If your plugin name is gulp-post-css
, then it becomes gulpPlugins.postCss
. However, that plugin name is gulp-postcss
, so it will be:
QUESTION
I am trying to transpile my ES6 js to ES5 js. When I visit the https://babeljs.io/repl webpage to test out what babel should output for the preset option es2015
it outputs JavaScript that is different than what gulp-babel
outputs.
Input ES6 JavaScript
...ANSWER
Answered 2018-Nov-12 at 13:43@babel/preset-env
is not the same thing as @babel/preset-es2015
- the former turns plugins on and off based on your targeted browser compatibility metrics (which you can customize).
The docs say that if you don't explicitly specify the targets in the preset's config, the following defaults will be used:
Sidenote, if no targets are specified,
@babel/preset-env
behaves exactly the same as@babel/preset-es2015
,@babel/preset-es2016
and@babel/preset-es2017
together (or the deprecatedbabel-preset-latest
).
@babel/preset-es2015
alone, on the other hand, will only compile features that were added in the ES2015 version of the spec. This does not include newer features, such as async/await! If you want all of the features added since then, you will have to add all of the yearly presets. For this reason, it's recommended that you use the env
preset.
If you switch https://babeljs.io to the @babel/preset-env
preset (which is a seperate section below the list of yearly presets), you get the same output.
QUESTION
I am sick trying to migrate to gulp 4, i wasted almost 2 days doing it.... I read about new functions API, about series, parallel. I did a clean uninstall of all previous packages and installed gulp 4 locally and gulp-cli globally.
My console shows
...ANSWER
Answered 2018-Oct-20 at 14:46This is truly a magic of stackoverflow. I find solution in 5-15 mins after creating a question :).
Solition for me was in rewriting watch task to this format:
QUESTION
I started creating my own working enviroment for my personal website using gulp.js until I stumbled across an error I can't seem to solve.
Here is my my code: (Note that I am pretty sure the error is in my 'sassCompile' task)
...ANSWER
Answered 2018-Sep-27 at 14:26I think this is because autoprefixer does not return a stream.
Try using gulp-autoprefixer instead:
QUESTION
Very new to BrowserSync. I'm trying to find out how to get it going haha.
My main file that stores everything is called 'gulpwork'.
Inside it I have 4 folders; two to convert Pug ('src') to HTML ('dist') and two to convert SASS ('sass') to CSS ('css').
I've managed to get BrowserSync to run however I'm getting the 'Cannot GET /' message so I know it probably has something to do with file directory.
I would like to have both Pug and SASS synced.
EDIT: It only works if I have both my Pug and HTML file outside their respected folders directly inside my root and it only works if the HTML file is named index.html. How can I get it to work in its respected folders and without having to change the name to index?
Here is my gulpfile.js code:
JS:
...ANSWER
Answered 2017-Oct-18 at 04:00Figured it out. BrowserSync looks for an 'index.html' file to start up and we get the 'cannot GET /' error because it's looking for something it doesn't see. So wherever our pug/html files are located, we must tell the pug function + the watch function where they are and then run BrowserSync. After it's run, you will still see the error however it's really working. All you have to do is link to the file so in my browser after localhost:3000 I would type the location of my file, so it would be 'localhost:3000/dist/about.html' After that, BrowserSync works. :)
QUESTION
I'm in the middle of making a website, and I use the command npm start
to put it up on localhost. However, all of a sudden it stopped working after I had created two workspaces on Visual Studio Code Editor. It only gives me an error.
This is what the error looks like:
npm ERR! path C:\Users\audre\first-blog\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\audre\first-blog\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\audre\AppData\Roaming\npm-cache_logs\2018-05-29T07_42_13_915Z-debug.log
I have no idea what that means. Can anyone help me? Thanks!
Edit: My package.json file contains the following:
...ANSWER
Answered 2018-May-29 at 07:59Use a process manager that will take care of environment.
few options are
forever(https://www.npmjs.com/package/forever)
with this, you start the website on localhost using forever start
PM2 (https://www.npmjs.com/package/pm2)
with this, you start the website on localhost using pm2 start
With process managers, you are abstracted from the environment specifications until you need to have something more specific.
QUESTION
I used many variation of gulpfile.js and "browser-sync start --server --files "*.html" command of global browsersync, but autoreload not working. I received only
...ANSWER
Answered 2018-Aug-04 at 15:22Append reload after each watch call. You have initiated browser sync, but you need to let it know when to reload. And it should reload on any file change. So add it after watch()
QUESTION
Trying to unit test Angular (not AngularJS) application.
Here is the package.json
...ANSWER
Answered 2018-Jul-25 at 03:07Apprently I was updating karma config with zone.js details, instead it should be updated on tests.ts, and also it's a good idea to compare with a brand new application and try to keep the differences between them as minimal as possible.
As we update from one Angular version to another, we initially started with version 2 as we progressed to version 5 there were number of differences, and any one of those could break.
I have also compared the files for package.json, karma.config.js, tsconfig.json .
And it made the trick.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install gulp-pug
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page