EzDevInfo.com

Why do we need to install gulp globally and locally?

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?

Try reinstalling `node-sass` on node 0.12?

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?

Is it possible to pass a flag to Gulp to have it run tasks in different ways?

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));
    });

How to run Gulp tasks synchronously/one after the other

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.

How to prevent moment.js from loading locales with webpack?

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.

How do I copy directories recursively with gulp?

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?

Gulp command not found after install

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?

gulp command not found - error after installing gulp

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)?

Using Gulp to Concatenate and Uglify files

I'm trying to use Gulp to:

1. Take 3 specific javascript files, concatenate them, then save the result to a file (concat.js)
2. 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?

Can't get Gulp to run: cannot find module 'gulp-util'

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?

Looking for way to copy files in gulp and rename based on parent directory

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

Use gulp to select and move directories and their files

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?

Gulp TypeError: Arguments to path.join must be strings

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.

no command 'gulp' found - after installation

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.

Why does gulp.src not like being passed an array of complete paths to files?

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?