I'm new to gulp, and I have a very basic question.
I've used the code snippet below to copy an "html" file to another directory.
gulp.task('copy-html', (done) => {
return gulp.src('./index.html')
.pipe(gulp.dest('dist'));
})
Then in the command line I wrote and executed gulp copy-html
I was expecting to see a dist folder with index.html in it.
but what happens is that nothing happens. The Task completes but no changes occur.
Node version: 9.3.0
npm version : 5.5.1
gulp versions:
CLI version 2.0.1
Local version 4.0.0
Thanks in advance.
This what worked for me. I just moved the solution directory to the hard disk partition where the os is installed and it worked like a charm
Related
I have installed and used livescript and its prelude-ls library with bower successfully. I loaded prelude-browser-min.js:
// gulpfile
'static/bower_components/prelude-ls/browser/prelude-browser-min.js',
and I was able to import functions in my application code: {map, filter, lines} = require 'prelude-ls'.
Now I'm removing bower from my stack. I also install livescript and a prelude-ls package with npm but there is no prelude-browser-min.js file anymore (though the doc says to use that). As for javascript files there are a few under a lib directory: index.js, Obj.js, etc. I tried to load them all (prelude-ls/**/*.js) but there is a module.exports line somewhere in them and it fails to load my app ("module is not defined").
If there is no prelude-browser-min.js, how can I do ?
update: related issue: https://github.com/gkz/prelude-ls/issues/73
Allright, I'll keep bower for that then !
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
I have installed gulp both globally
sudo npm install --global gulp-cli
and locally
npm install --save-dev gulp
/usr/local/bin/gulp exists, and ./node_modules/gulp and ./node_modules/gulp-cli exist.
When I try to run gulp on the command line, I get the common error
$ gulp
[00:55:43] Local gulp not found in ~/dev/myProj/play-java-seed
[00:55:43] Try running: npm install gulp
One thing that I noticed is that if I run gulp in some random directory (~/foo), the error message is that the local gulp is not found in that directory. If I run it from the correct directory (~/dev/myProj/play-java-seed/ui) then the error references the parent directory.
There is in fact no gulp installed in the directory in the error message; it is installed on directory lower.
/usr/local/bin/gulp is a symlink to a file with these contents:
#!/usr/bin/env node
'use strict';
require('../')();
Is the .. in that file correct? It seems strange, but I have not looked at it closely before.
If the OS matters, I am running 32 bit Ubuntu 16.04.
devDependencies in my package.json includes both gulp and gulp-cli
Rico Kahler had the correct answer in his comment.
When I looked at the machine (instead of going off of my memory), I saw that the gulp file was one directory higher than it should have been.
The error message did have a clue toward this: it gave the directory holding the gulpfile, not the current directory.
Since yesterday's update on VSO / VSTS (17 Aug update) our gulp tasks fail.
The failing part is where we overwrite existing files using gulp.dest() in a gulp build step.
I've tried to delete the file first and then use gulp.dest and this works, however this practice can't be used on all places because we need to inject code into existing files.
We use Gulp version 3.9.0
Error: EPERM: operation not permitted, open 'C:\a\1\s\Source\Project\Project.Web\index.cshtml'
Since the last update of VSO all source files are now readonly. We solved our issue by removing the readonly flag on the source files.
Based on my test, the issue is related to Gulp 3.9.0, I can reproduce that issue with Gulp 3.9.0 (npm install task, Command: install, Arguments: gulp#3.9.0), the Gulp 3.9.1 works fine. So you can update to gulp 3.9.1.
You could add npm install task to install latest version. (Command: install; Argument: gulp)
I had previously installed gulp globally using npm install gulp -g. Then I cloned an existing project, and that required me to use its own gulp. Now when I do a gulp -v from outside my project folder, I get a mismatch like this.
C:\Users\userme>
[11:14:05] CLI version 3.8.11
[11:14:05] Local version 1.0.0
And when I do a gulp from my project folder, I get this.
C:\project\new\tools>
[11:14:26] CLI version 3.8.11
[11:14:26] Local version 3.8.11
Now I have not been able to merge my JS files properly using gulp (I'm getting some weird formatting errors in the min file) and I suspect it has something to do with this mismatch.
Is there a way to remove the global gulp version, but keep the project specific gulp?
Or can I update my global version gulp to #3.8.11?
Note - I did try updating the global gulp by using npm update gulp#3.8.11 -g but nothing happened. i still get the mismatch.
Update to describe the issue:
I am using gulp to merge multiple JS files into 1 single main.js file. The formatting that I get in the merged file has a syntactical error in it.
Expected output in merged file -
...
define('utils/knockoutBindings/slider',['require','ko','jquery'],function(require) {
'use strict';
var ko = require('ko');
var $ = require('jquery');
...
Actual output in merged file (this 1 line of code below is wrongly replacing the entire 4 lines above) -
...
var'utils/knockoutBindings/slider',['require','ko','jquery'],function(require) {
...
It might seem that there is an issue in the gulp code, but the same code is used by other users and it works well on their end. The only difference we have found is in the mismatch in my gulp versions.
I am answering my own question, just so it is useful for others.
Is there a way to remove the global gulp version, but keep the project specific gulp?
No. AFAIK, you are required to install gulp globally as well as one specific to your project.
More info on gulp versions here.
Why do we need to install gulp globally and locally?
http://blog.dwaynecrooks.com/post/110903139442/why-do-we-need-to-install-gulp-globally-and
https://github.com/gulpjs/gulp/issues/171
https://github.com/gulpjs/gulp/issues/140
Or can I update my global version gulp to #3.8.11?
Since I was facing a mismatch in my local version, I had to update it from the project folder itself.
npm install gulp#3.8.11 --save
More info on this here.
http://www.eskocruz.com/gulp-version-mismatch
To update your Local version npm install gulp#version_you_need
To update CLI version npm install -g gulp#version_you_need
Removing node_modules folder and running npm install gulp within that dir sorted my issue out.
npm install -g gulp wasn't fixing it for me, from either in or out of the project folder. My gulp version was already correct in my package.json file. All I had to do was run npm install from within the project folder, and the gulp version from in the project folder was corrected.
Updating both the local version same as that of the global version fixed the issue. My initial gulp -v yielded CLI version 3.9.1 and Local version 4.0.0. I updated the local version from within the project folder npm install gulp#3.9.1 --save. This resolved my issue .
Gulp 4 uses an updated CLI which needs to be updated globally. This CLI is backwards compatible with any Gulp 3.X projects you may have locally - Read more.
It seems that the latest version (at the time of this post) of gulp-cli is 2.3.0 which means there will always be a mismatch.
If you run npm install -g gulp, then the latest version of the CLI will be installed. If you have any other version installed then it will update to the latest version.
The local version's latest release (at the time of this post) is 4.0.2.
Run npm install --save-dev gulp to install the latest version of Gulp in your project folder as a dev-dependency. Like with the CLI version it will update if you have an older version.
Mismatched versions work like normal.
SIDE NOTE: Remember to prefix global installs with sudo if you're working on a Mac and you have admin rights e.g. sudo npm install -g gulp.
BUT if you don't have admin rights and you can update the local version, but not the global version, then you can run node ./node_modules/gulp/bin/gulp.js from your project folder and it will execute the gulp file, even if you have the wrong CLI version, but you need to have the default task set up.