I have installed gulp using different ways like,
npm install gulp
npm install gulp -g
npm install gulp -g --save-dev
When I do gulp -v, it gives me the version but when I write gulp nothing happens. whats wrong?
Edit: Here is my gulp file,
var gulp = require('gulp');
gulp.task('default', function () {
// write something here
});
gulp.task('jshint', function(){
gulp.src('js/script.js')
.pipe(jshint)
.pipe(jshint.reporter('default'));
})
After debugging I found the solution. I had given a wrong name (gulp.js) to the gulp file. It should be gulpfile.js. I changed the name and it started working.
Related
I've installed Gulp like this:
npm install gulp -g
When I try gulp -v I get this:
[16:19:03] CLI version 3.9.1
But when I try to use gulp in my project by running gulp enter code here I receive:
[16:20:40] Local gulp not found in ~/Code/gulp
[16:20:40] Try running: npm install gulp
What is wrong?
Gulp requires two parts to work in any project:
the gulp object that has the 5 functions attached, (src,dest, watch, run, task). this is installed locally for a project, as well as all the plugins necessary, because it is included in your taskfiles such as gulpfile.js. Its a locally imported module.
npm install --save-dev gulp
the gulp-cli, because this is a command line utility, that can be called from anywhere on your computer. Its a globally accessible cli command. You console needs to be able to see it. You do not import this.
npm install -g --save gulp-cli
you can see more here:
https://www.npmjs.com/package/gulp-cli/tutorial
You have to install gulp inside your project:
npm install --save-dev gulp
I am trying to run the Aurelia skeleton-es2016-asp.net5 demo.
I am following the steps in read me.
I opened a command box and ran
npm install gulp
which seemed to work
however ehrn I now run
gulp watch
I get an error
No gulpfile found
Have you created gulpfile.js containing the gulp tasks ?
If No, you need to add gulpfile.js to your directory root and may write some default task in it for testing,
var gulp = require('gulp');
gulp.task('default', function () { console.log('Hello Gulp!') });
If yes, Try Installing gulp globally npm install -g gulp
I am having problem with installing npm global package
for example
npm install --global gulp-cli
but when i want to run "gulp" it won't run
Local gulp not found in ~
Try running: npm install gulp
running which gulp => /usr/local/bin/gulp
as you can find here in the guide,
you have to install gulp also in your project dependencies
npm install --save-dev gulp
if you try gulp outside a project with gulp instlled as depedency you'll recevie that error
hope this helps
When I run the gulp task (default) for the first time, the sass task gives an error on a Bower package. More specifically on Susy.
The error:
Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
file to import not found or unreadable: su/utilities
Current dir: /Users/Jeroen/sites/gulp/bower_components/susy/sass/susy/
The Susy bower package is being installed successfully with gulp-bower, taking its information from my bower.json file. However, when the default task gets to the sass task, it can't find Susy.
style.scss
#import "../bower_components/susy/sass/susy";
This only occurs when I run gulp for the first time. The watch task doesn't stop/breaks after this error, and keeps working after. (I can compile sass without a problem).
But it looks abit messy, any ideas on how I can prevent this?
You can see my entire gulpfile.js here:
https://gist.github.com/JeroenDelbrk/798d646af5cc2ad78da0
Tips on how I can improve my gulpfile, unrelated to this question, are also welcome.
In this line
gulp.task('default', ['bower', 'sass', 'scripts', 'imagemin', 'iconfont', 'watch']);
All of the tasks are getting executed in parallel. Which is fine if you don't have any dependencies. However, judging from your explanations, a successful run of sass is strongly dependent on a successful execution of bower. At the time you run sass, bower might not be finished, thus not providing the files you need.
To solve that in Gulp 3.*, you need to wire your dependencies right. I'd suggest the following:
// Define plugins
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins');
$ = gulpLoadPlugins();
gulp.task('bower', function() {
return $.bower()
.pipe(gulp.dest('./bower_components'))
});
// Sass compile + prefix task
gulp.task('sass', ['bower'], function(){
...
});
// Default Task
gulp.task('default', ['sass', 'scripts', 'imagemin', 'iconfont']);
// Watch Task
gulp.task('watch', ['default'], function(){
gulp.watch('sass/**/*.scss', ['sass']);
gulp.watch('js/*.js', ['scripts']);
gulp.watch('originals/*', ['imagemin']);
gulp.watch('icons/*.svg', ['iconfont']);
});
And ruf gulp watch. This will execute all tasks which can be run in parallel at the same time, but bower will be executed before sass. One problem you might face: Running bower everytime you'll execute sass. That's why we will use gulp-changed to prevent reruns.
gulp.task('bower', function() {
return $.bower()
.pipe(changed('./bower_components'))
.pipe(gulp.dest('./bower_components'))
});
Hope this helps
I have cloned a repo with a working gulpfile.js, and now when running gulf on the cloned repo, I received the error
Object #<Object> has no method 'if'
The offending task code:
gulp.task('html', ['styles'], function () {
return gulp.src('app/*.html')
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
.pipe($.if('*.css', $.csso()))
.pipe($.useref.restore())
.pipe($.useref())
.pipe(gulp.dest('dist'));
});
I have installed gulp-if and gulp-csso. $ is
var $ = require('gulp-load-plugins')();
Still learning gulp. Not sure where to go from here.
In package.json, gulp-if was not listed under devDependencies.
"devDependencies": {
.
.
.
"gulp-if": "^1.2.5",
Including it eliminated the error.
Whenever installing a development dependency, I should affix --save-dev so the package is automatically placed in package.json, and then anyone cloning will automatically get all the packages in package.json by issuing the npm install command.
npm install <package> --save-dev