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
Related
I took this from the Gulp documentation:
const { series, parallel } = require('gulp');
function clean(cb) {
console.log("clean");
cb();
}
function css(cb) {
console.log("css");
cb();
}
function javascript(cb) {
console.log("javascript");
cb();
}
exports.build = series(clean, parallel(css, javascript));
When I run this with gulp build, I get:
Task never defined: build
If I run ./node_modules/.bin/gulp build, it works.
And if I change the exports to:
exports.build = css
and run with gulp build, then it works too.
What am I doing wrong?
I've tried this on the WSL (Linux, my default env), but also on Windows directly. Another developer on my team doesn't have this issue, although he is running on a Mac. I've also tried different versions of Node.
Updating from gulp v4.0.0 to v4.0.1 fixes this issue.
Issue is with local vs global version of gulp.
use 'node gulp build' or 'yarn gulp build' (if you are using yarn)
This will solve your issue.
How can I use globally installed gulp in a project where I have gulpfile.js without installing gulp in that project or linking it to global gulp.
When I type
$ gulp --version
I get:
CLI version 3.9.1
but when I type:
$ gulp
I get:
Local gulp not found in
I do not want any additional files nor directories created in the path-of-my-project just want to use globally installed gulp.
I want to use the gulp in the project-dir or pass the path to project-dir as a parameter.
In the project-dir I have only gulpfile.js and want to have only that file related to gulp.
How to do that?
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.
I'm trying to set up gulp in an MVC Core project within VS 2017. I have what I believe to be a valid gulpfile.js:
var gulp = require('gulp');
var rimraf = require('rimraf');
var concat = require('gulp-concat');
var cssmin = require('gulp-cssmin');
var uglify = require( 'gulp-uglify' );
var paths = {
webroot: './wwwroot/',
};
paths.js = paths.webroot + 'js/**/*.js';
paths.minJs = paths.webroot + 'js/**/*.min.js';
paths.css = paths.webroot + 'css/**/*.css';
paths.minCss = paths.webroot + 'css/**/*.min.css';
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";
gulp.task("clean:js", function (cb) {
rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:css", function (cb) {
rimraf(paths.concatCssDest, cb);
});
gulp.task( "clean", ["clean:js", "clean:css"] );
But when I open Task Runner Explorer I get the message "(no tasks found)".
I've checked to ensure all the gulp packages were installed via npm. I also added a package.json file. But the tasks are still not being found.
What am I doing wrong?
Apparently you have to install gulp locally within your project for it to work properly with Visual Studio. Global install won't work. Deleting the global copy and installing it locally solved the problem.
I was faced the same issue, and fix this after running two commands. Please refer below the process:
1) Right click on your gulp file in visual-studio, and choose "Open Command Line > PowerShell"
2) Run the command npm install gulp for install gulp. (You have to install gulp in your project, no matter if you have already installed gulp globally, but in this case you have to install the gulp in your project)
and press enter.
3) After execution of command go to task runner explorer in Visual-Studio and press the refresh button.
After pressing the refresh button you will see all your task list under task runner.
If you found any error related to "missing module" in output window like below:
Then you have to install missing npm plugins, for this just run the below command (into powershell):
npm install and press enter.
This command will install all the missing plugin, refer below image:
And then press again the refresh button in task runner explorer and you will see all your gulp task list under task runner window.
Hope this solution will help.
You need to have all the dependencies installed too - my VS Task Runner was failing without any error messages on a new install - I had already installed gulp locally, but my gulpfile.js showed the following required modules:
var util = require('gulp-util'),
gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
rename = require('gulp-rename'),
babel = require('gulp-babel'),
terser = require("gulp-terser")
//del = require("del");
;
One of them was missing, so I ran
npm install gulp-util
npm install gulp-concat
npm install gulp-cssmin
npm install gulp-rename
npm install gulp-babel
npm install gulp-terser
And the task runner displayed my tasks - one of the modules weren't loading properly. Odd behaviour because the gulpfile.js and task runner were working correctly last week and the only changes made have been to install a few unrelated node modules locally.
In my case, I'd already installed gulp (prior to this, Task Runner Explorer was saying "Failed to load" under Gulpfile.js like this)
But I still had "No tasks found" like this
Additionally, Visual Studio had already told me that it had installed all the required node packages when I asked it to convert my bundleconfig.json to gulp. But despite all of this, gulp still wasn't happy (and the node_modules directory under my web app root was pretty empty).
Running "npm install gulp" again I noticed this in the commandline
and thought this might be a write permission problem because package.json is under source control in my project. I checked that out and re-ran "npm install gulp" and similar for the associated packages like gulp-concat and now I have a very full node_modules directory and... does gulpfile.js work? Well no but I've got a different error now so I'm pretty sure that I'm on to a different problem now :-/
TL;DR; make sure your package.json is checked out before you start installing node packages if you're using source control.
In my case, I had the same. I installed all requirements but still, gulp did not work on task runner explorer, threw no tasks found. I solved it by unchecking the $(VSInstalledExternalTools).
Tools > Options > Projects and Solutions > Web Package Management > External Web Tools
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