gulp interview questions
Top gulp frequently asked interview questions
I've looked though 2 manuals about gulp and they both say that I need to install gulp first globally (with -g flag) and then one more time locally. Did not get it. Why do I need this?
Source: (StackOverflow)
I would like to use google web starter kit. I installed node.js v0.12.0, node-sass
& gulp
.
And then ran:
$ sudo npm install
When I typed gulp serve
then got this error:
Using gulpfile ~/web-starter-kit/gulpfile.js Starting 'styles'... 'styles' errored after 93 ms
Error: `libsass` bindings not found. Try reinstalling `node-sass`? at getBinding
I reinstalled node and gulp but this doesn't help.
What should I do next?
Source: (StackOverflow)
Normally in Gulp tasks look like this:
gulp.task('my-task', function() {
return gulp.src(options.SCSS_SOURCE)
.pipe(sass({style:'nested'}))
.pipe(autoprefixer('last 10 version'))
.pipe(concat('style.css'))
.pipe(gulp.dest(options.SCSS_DEST));
});
Is it possible to pass a command line flag to gulp (that's not a task) and have it run tasks conditionally based on that? For instance
gulp my-task -a 1
gulp.task('my-task', function() {
if (a==1) {
var source = options.SCSS_SOURCE;
} else {
var source = options.OTHER_SOURCE;
}
return gulp.src(source)
.pipe(sass({style:'nested'}))
.pipe(autoprefixer('last 10 version'))
.pipe(concat('style.css'))
.pipe(gulp.dest(options.SCSS_DEST));
});
Source: (StackOverflow)
in the snippet like this:
gulp.task "coffee", ->
gulp.src("src/server/**/*.coffee")
.pipe(coffee {bare: true}).on("error",gutil.log)
.pipe(gulp.dest "bin")
gulp.task "clean",->
gulp.src("bin", {read:false})
.pipe clean
force:true
gulp.task 'develop',['clean','coffee'], ->
console.log "run something else"
In develop
task I want to run clean
and after it's done, run coffee
and when that's done, run something else. But I can't figure that out. This piece doesn't work. Please advise.
Source: (StackOverflow)
Hello is there anyway you can stop moment.js from loading all the locales(I just need english) when your using webpack? I'm looking at the source it seems that if hasModule is defined which it is for webpack then it always tries to require() every locale. I'm pretty sure this needs pull request to fix. But is there anyway we can fix this with a webpack config.
Here is my webpack config to load momentjs
resolve: {
alias: {
moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
},
},
Then anywhere I need it I just do require('moment') this works but its adding about 250kb of unneeded language files to my bundle. Also I'm using the bower version of momentjs and gulp.
Also if this can't be fixed by a webpack config here is a link to the function where it loads the locales https://github.com/moment/moment/blob/develop/moment.js#L760-L772 I tried adding "&& module.exports.loadLocales" to the if statement but I guesse webpack doesnt acaully work in a way where that would work it just requires no matter what I think it uses a regex now so I don't really know how you would even go about fixing it. Anyways thanks for any help.
Source: (StackOverflow)
I am trying to stage a project from a working directory to a server (same machine). Using the following code:
gulp.src([
'index.php',
'css/**',
'js/**',
'src/**',
])
.pipe(gulp.dest('/var/www/'));
I would expect to see all the files copied. However it flattens the dir structure - all directories are copied but every file is placed in the root /var/www
Gulp seems like a great build tool but copying items should be a simple process surely?
Source: (StackOverflow)
I installed gulp(globally) and it looks like it worked because it ran this code:
├── tildify@0.2.0
├── interpret@0.3.5
├── pretty-hrtime@0.2.1
├── deprecated@0.0.1
├── archy@0.0.2
├── minimist@0.2.0
├── semver@2.3.2
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── chalk@0.5.1 (escape-string-regexp@1.0.1, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, dateformat@1.0.8-1.2.3, vinyl@0.2.3, through2@0.5.1, multipipe@0.1.1, lodash.template@2.4.1)
├── liftoff@0.12.0 (extend@1.2.1, minimist@0.1.0, resolve@0.7.4, findup-sync@0.1.3)
└── vinyl-fs@0.3.5 (graceful-fs@3.0.2, lodash@2.4.1, mkdirp@0.5.0, strip-bom@0.3.1, vinyl@0.2.3, through2@0.5.1, glob-watcher@0.0.6, glob-stream@3.1.14)
But when I type gulp
it says -bash: gulp: command not found
Any idea what's going on?
Source: (StackOverflow)
I've installed gulp both globally and locally using
npm install gulp
npm install gulp -g
npm install gulp-util
npm install gulp-util -g
When try to run gulp i get
'gulp' is not recognized as an internal or external command, operable program or batch file.
Running npm list gulp (or -g), I gulp@3.7.0
with the location of either my global or local gulp installation.
I've tried running node gulpfile.js
pointed to my gulpfile, and it runs without error, and of course, it starts with require('gulp')
.
Any suggestions on getting gulp working on Windows(8.1)?
Source: (StackOverflow)
I'm trying to use Gulp to:
- Take 3 specific javascript files, concatenate them, then save the result to a file (concat.js)
- Take this concatenated file and uglify/minify it, then save the result to another file (uglify.js)
I have the following code so far
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_uglify = require('gulp-uglify');
gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_concat('concat.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('js'));
});
gulp.task('default', ['js-fef'], function(){});
However, the uglify operation doesn't seem to be working, or the file isn't generated for some reason.
What do I need to do to make this happen?
Source: (StackOverflow)
On Windows 7, I've installed gulp as explained here: http://markgoodyear.com/2014/01/getting-started-with-gulp/:
npm install gulp -g
- In my app folder:
npm install gulp --save-dev
- I create a
gulpfile.js
file.
But then, when I try to run gulp
, I get this error message:
module.js:340
throw err;
^
Error: cannot file module 'gulp-util'
at Function.Module._resolveFilename (module.js:338:15)
etc.
But gulp-util
is present (in the local app folder) in:
node_modules
gulp
node_modules
gulp-util
Any idea what may be the cause?
Source: (StackOverflow)
For each module I have some files that need to be copied over to the build directory, and am looking for a way to minimize the repeated code from this:
gulp.src('./client/src/modules/signup/index.js')
.pipe(gulp.dest('./build/public/js/signup'));
gulp.src('./client/src/modules/admin/index.js')
.pipe(gulp.dest('./build/public/js/admin'));
to something like this:
gulp.src('./client/src/modules/(.*)/index.js')
.pipe(gulp.dest('./build/public/js/$1'));
Obviously the above doesn't work, so is there a way to do this, or an npm that already does this?
Thanks
Source: (StackOverflow)
I'm currently using gulp to call a bash script that cleans my dist/
directory and moves the appropriate files to the clean directory. I would like this to be done with gulp because I am not sure the script would work on a non *nix file system.
So far, I'm using the gulp-clean module to clean the dist/
directory but when I try to move the required directories and their files to the dist folder, the directories are empty.
var gulp = require('gulp'),
gutil = require('gulp-util'),
clean = require('gulp-clean');
gulp.task('clean', function(){
return gulp.src(['dist/*'], {read:false})
.pipe(clean());
});
gulp.task('move',['clean'], function(){
gulp.src(['_locales', 'icons', 'src/page_action', 'manifest.json'])
.pipe(gulp.dest('dist'));
});
gulp.task('dist', ['move']);
calling gulp dist
results in the the dist/
directory being populated with the correct directories but they are all empty
$ ls dist/*
dist/manifest.json
dist/_locales:
dist/icons:
dist/page_action:
How do I copy the directories and their contents to the dist/
folder?
Source: (StackOverflow)
I have i problem with gulp-ruby-sass. When i try to run the watch task and change some .sass files it occurs error:
TypeError: Arguments to path.join must be strings
Here is my gulpfile.js
var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-ruby-sass');
var watch = require('gulp-watch');
gulp.task('sass', function() {
return gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
gulp.watch('./sass/*.sass', ['sass']);
})
I used gulp-slash but it don't works.
Source: (StackOverflow)
After installing gulp.js via NPM i get no command 'gulp' found
when running the command from the very directory in installed from. Im running a Ubuntu Vagrant VM.
https://github.com/andrewmclagan/vagrant-devbox
When i look under the node_modules/.bin/
directory i can see the gulp
executable there.
Is there something wrong with my NPM installation? I'm guessing there is.
Source: (StackOverflow)
I'm attempting to pass gulp.src an array of files that I want it to deal with. This is the array as it stands.
['bower_components/jquery/jquery.js',
'bower_components/superscrollorama/js/greensock/TweenMax.min.js',
'bower_components/superscrollorama/jquery.superscrollorama.js' ]
I'm finding though that gulp.src doesn't seem to like that and the third element doesn't make it through into the end destination.
I've found that everything works fine when I introduce some wildcard characters like this:
['bower_components/**/jquery.js',
'bower_components/**/js/greensock/TweenMax.min.js',
'bower_components/**/jquery.superscrollorama.js' ]
But why? Something to do with the way globbing works? I've googled but can't find out.
Sorry if this is a real noob question. Maybe this isn't the intended purpose of globbing but it doesn't make sense to me that it should work this way. Can anyone shed some light?
Source: (StackOverflow)