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 am having difficulties with livereload in my gulp file.
If I run livereload.listen() as part of my watch task it works.
gulp.task('watch', function() {
livereload.listen();
gulp.watch('app/styles/**/*.less', ['less']);
});
// run gulp watch
However, if I launch live reload as separate task in another term window before watch it does not work.
gulp.task('lr', function() {
livereload.listen();
});
gulp.task('watch', function() {
gulp.watch('app/styles/**/*.less', ['less']);
});
// run gulp lr in one terminal and gulp watch in another - after.
I've tried using the gulp-connect plugin with the same result. Something about the watch task being run separately. I can see livereload loaded in the browser in all cases and watch runs correctly.
What is happening and is it possible to run these as 2 tasks (note that I am not interested in joining the tasks as one. That's not the goal of this question).
Just getting started with gulp, going through some tutorials. I'm in a mac terminal...
My extremely simple gulpfile:
var gulp = require('gulp');
var scripts = 'scripts/*.js';
gulp.task('copy', function() {
// place code for your default task here
return gulp.src(scripts)
.pipe(gulp.dest('build/js'));
});
I run 'gulp copy' on the command line and get some output that looks like it runs, but no files are copied:
Richards-MBP:gulp-test richardlovejoy$ gulp copy
[19:30:38] Using gulpfile /Work/gulp-test/gulpfile.js
[19:30:38] Starting 'copy'...
[19:30:38] Finished 'copy' after 27 ms
I have 2 js files in the 'scripts' folder.
I originally started with a more complex gulp file which also failed to produce any output.
I inserted gulp-debug but it just shows me that 0 files are in the pipe.
Running the latest version of node (5.2.0) as of this writing.
Tried gulp --verbose but it gives me nothing.
How can I at least see what gulp is doing behind the scenes to debug this?
Thanks
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