I have my src/ directory as follows:
src/
---about/
------history.pug
------mission.pug
---contact/
------email.pug
---index.pug
I want my .pug files to be compiled in such a way that they maintain this directory hierarchy even in the dist/ directory. Something like:
dist/
---about/
------history.html
------mission.html
---contact/
------email.html
---index.html
I'm using Gulp to process the pug files. Can this be achieved with one task using gulp, or otherwise? Thanks!
The Gulp task for handling my pug files:
gulp.task('pug', function() {
return gulp.src('src/pug/*.pug')
.pipe(pug({
basedir: "./"
}))
.pipe(gulp.dest('dist/html'));
})
gulp.task('pug', function() {
return gulp.src('src/**/*.pug')
.pipe(pug())
.pipe(gulp.dest('dist'));
})
will get your pug files and put them where I think you want. In your code you have
.pipe(gulp.dest('dist/html'));
but there is no html folder in your desired dist folder structure. Same comment as to
gulp.src('src/pug/*.pug')
Your src directory does not have a pug subfolder, so why is src/pug here?
Also I don't think {basedir:....} is an option to the pug plugin so I removed it.
I currently have a file structure like this
SASS
gulpfile.js
node_modules
sites
example-site
scss
css
example-site-two
scss
css
example-site-three
scss
css
I have gulp installed in the main parent SASS folder with a task 'sass-all' that can go through every single sites scss folder and compile it into css.
I'm trying to write a new task called 'sass-single' which can be run from any of the example-site folders. So let's say I'm in the folder "example-site-two", I want to be able to cmd and do 'gulp sass-single' and ONLY have it compile the SASS in this site. Same thing for a watch-single task I'd like to setup.
Problem is whenever I run this task from a site folder, it changes my working directory up to the parent SASS folder. I don't want to have 100 different tasks for every different site, I'd prefer to just have one 'sass-single' task thats smart enough to only compile the files from the folder I was in when I ran the script.
current Gulp task attempt
gulp.task('sass-single', function () {
process.chdir('./');
// Where are the SCSS files?
var input = './scss/*.scss';
// Where do you want to save the compiles CSS file?
var output = './css';
return gulp
.src(input)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(output));
});
However this goes back to the main SASS folder and then just does nothing.
How would I go about modifying this to be able to run from any site folder and have it only do it for that site?
If you want to change the current working directory (CWD) back to the directory where you invoked gulp then this won't work:
process.chdir('./');
That's a relative path. Relative paths are relative to the CWD. But by the time you execute process.chdir('./') Gulp has already changed the CWD to the directory where your Gulpfile.js is located. So you're just changing the CWD to ... the CWD.
You could explicitly pass a CWD to gulp on the command line:
SASS/sites/example-site> gulp --cwd .
But that would get annoying pretty quickly.
Luckily for you Gulp stores the original CWD in process.env.INIT_CWD before changing it. So you can use the following in your task to change the CWD back to the original:
process.chdir(process.env.INIT_CWD);
I'm trying to create a gulp task that will execute Yeoman generator I'm developing. I've got this working using the following task, but I'm trying to find a way to not pass in the fully qualified path to the location of my globally installed NPM modules.
The gulp plugins I've seen (gulp-shell & gulp-run) execute a command (such as npm root -g) but I can't figure out how to read the text into a variable or if there's another / easier way to get this value.
gulp.task('run-yo', function () {
spawn('node', [
'--debug',
'/Users/ac/.npm-packages/lib/node_modules/yo/lib/cli.js',
'nodehttps'], { stdio: 'inherit' });
});
You can use node which
var which = require('which');
which.sync('yo');
I'm trying to use Polymer with a Jekyll site, but I can't figure out how to get things set. I downloaded and can run the Polymer Starter Kit. Polymer has the page contents in the app directory, but if I try to set up and run Jekyll from this folder, I get a load of errors because the Polymer index.html can't find the resources (because the root directory is different).
What is the correct way to set-up and structure for Jekyll and Polymer to work together?
Reading polymer started kit readme.md paragraph development workflow you learn that :
gulp serve is made for development phase and gulp makes a build of your application, ready to be deployed on a web server.
Just copying what you've downloaded from github on a web server will not work as is, because gulp serve is more complex than this. Read the gulpfile.js and you will see all what is done by the gulp serve command.
You need to do a gulp and you then can deploy what is generated in the dist folder. This will work in a jekyll site.
You can integrate gulp-jekyll in your gulp build process. I'd also consider watching changes in your browser-sync to automatically generate html files on change. Vulcanization process should be done only when you are deploying.
I just came back to this, and things are much improved since last summer. I made a gulpfile based on that for the Polymer Starter Kit (1.2.3). But I changed the behavior of the default and serve tasks to run Jekyll serve and build in the shell:
var spawn = require('child_process').spawn;
var argv = require('yargs').argv;
gulp.task('jekyllbuild', function(done) {
return spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' })
.on('close', done);
});
// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
// Uncomment 'cache-config' if you are going to use service workers.
runSequence(
'jekyllbuild',
['ensureFiles', 'copy', 'styles'],
'elements',
['images', 'fonts', 'html'],
'vulcanize', // 'cache-config',
cb);
});
gulp.task('serve', function(done) {
if (argv.port) {
return spawn('bundle', ['exec', 'jekyll', 'serve', '--port=' + argv.port], { stdio: 'inherit' })
.on('close', done);
} else {
return spawn('bundle', ['exec', 'jekyll', 'serve'], { stdio: 'inherit' })
.on('close', done);
}
});
Using BrowserSync would have a much cleaner effect, but this is a simple way to get Jekyll functionality and the benefit of vulcanization for production. (Note that you also have to install the yargs package to handle port specification.) My whole gulpfile is here.
I am using WebStorm 9, I have a very basic gulp file script setup to copy 1 file from directory src to directory build.
I have found that when changing the content of index.html file in the src directory gulp copies the file fine to the build directory... but WebStorm does not show that unless I use File | Synchronize.
Why is this? How can I get WebStorm to show the change without using File | Synchronize?
My gulp file consists of the following:
var gulp = require('gulp')
gulp.task('copyme', function(){
return gulp.src('./src/index.html')
.pipe(gulp.dest('./build/index.html'));
});
gulp.task('watch', function(){
gulp.watch('./src/index.html', ['copyme']);
})
IDEA-136705 is closed as fixed, fix should become available in WebStorm 10