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
Related
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
I have a problem with gulp trying to get this app I found on GitHub up and running.
https://github.com/simpulton/eggly-redux
I appreciate if anyone would be interested to have a look at this.
Many thanks in advance.
My repo for this with adjusted package.json and added .babelrc file is here.
https://github.com/mehmettugrulsahin/eggly-redux
Configuration files for quick look are here:
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/package.json
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/webpack.config.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/gulpfile.babel.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/.babelrc
It should normally be starting up with the following instructions indicated in the ReadMe file, but this did not work out for me.
git clone https://github.com/simpulton/eggly-redux.git
cd eggly-redux
npm i
gulp
Similar questions are already been asked. I have gone through all I
could find from answers to those here, but no luck. That's why I am
asking a new question.
Here is what I have done when it did not work out along with all my findings
I got the following installed just in case when it did not work in the
first place..
npm install -g npm
npm install -g webpack
npm install -g gulp
npm install -g babel
npm install -g browser-sync
npm install browser-sync --save-dev
npm install babel --save-dev
npm install babel-register --save-dev
npm install babel-preset-es2015 --save-dev
npm uninstall babel
npm install --global babel-cli
npm install babel-cli --save-dev
And gulp still gives me the same error
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ModuleBuildError: Module build failed: ReferenceError: [BABEL] C:\projects-mts\#eggly-redux\client\app\app.js: Unknown option: C:\projects-mts\#eggly-redux\.babelrc.presets
at Logger.error (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at transpile (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:12:22)
at Object.module.exports (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:71:12)
I figured out that this is something to do with this task in
gulpfile.babel.js
// use webpack.config.js to build modules
gulp.task('webpack', () => {
return gulp.src(paths.entry)
.pipe(webpack(require('./webpack.config')))
.pipe(gulp.dest(paths.output));
});
so I changed
.pipe(webpack(require('./webpack.config')))
to
.pipe(webpack(require('webpack-stream')))
in gulpfile.babel.js. Then gulp gives me the following:
[20:52:57] Requiring external module babel-register
(node:9156) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[20:52:58] Using gulpfile C:\projects-mts\#eggly-redux\gulpfile.babel.js
[20:52:58] Starting 'default'...
[20:52:58] Starting 'webpack'...
[20:52:58] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
43db048c592b328cbb29.js 2.16 kB 0 [emitted] main
[20:52:58] Finished 'webpack' after 366 ms
[20:52:58] Starting 'serve'...
[20:52:59] Finished 'serve' after 75 ms
[20:52:59] Starting 'watch'...
[20:52:59] Finished 'watch' after 46 ms
[20:52:59] Finished 'default' after 494 ms
[BS] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.2.2:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.2.2:3001
------------------------------------
[BS] Serving files from: client
along with a file called
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/client/43db048c592b328cbb29.js
instead of bundle.js and my browser says
"NetworkError: 404 Not Found - http://localhost:3000/bundle.js"
if I rename that file to bundle.js then browser gives me
SyntaxError: import declarations may only appear at top level of a module
import 'bootstrap-css-only';
My versions are as follows:
$ npm -v
3.9.5
$ gulp -version
[20:59:02] Requiring external module babel-register
[20:59:02] CLI version 3.9.1
[20:59:02] Local version 3.9.1
$ webpack -v
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 15ms
I noticed your comments after I tried the following :
Deleted the node_modules directory
npm install babel babel-register babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-es2015-webpack browser-sync gulp gulp-rename gulp-template webpack webpack-stream css-loader raw-loader style-loader stylus-loader url-loader --save-dev
npm i
and now I get some other error. I think I made some progress
$ gulp
[15:24:35] Requiring external module babel-register
(node:12704) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:24:36] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[15:24:36] Starting 'default'...
[15:24:36] Starting 'webpack'...
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ./~/css-loader!./~/stylus-loader!./client/app/app.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\app.styl:37:1
33| from
34| opacity 0
35| to
36| opacity 1
37|
-------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (C:\projects-mts\eggly-redux\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (C:\projects-mts\eggly-redux\node_modules\stylus\lib\renderer.js:94:9)
at C:\projects-mts\eggly-redux\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (C:\projects-mts\eggly-redux\node_modules\when\lib\Scheduler.js:62:19)
# ./client/app/app.styl 4:14-122./~/css-loader!./~/stylus-loader!./client/app/components/categories/categories.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\components\categories\categories.styl:35:1
31| overflow-x hidden
32| overflow-y auto /* Scrollable contents if viewport is shorter than content. */
33| background-color #2B2828
34| border-right 1px solid #7B807E
35|
-------^
The first error you get "Unknown option: .babelrc.presets" comes from the wrong version of babel-core used to build your project. Update the version to 6.9. The version must be equal to the babel-preset-es2015 version
Yes, #Damien Leroux is right.
You altered the original project with a .babelrc file. The babel version that is in the project doesn't understand the presets setting yet. If you update babel-core to the current version it will work. Note that you have to update babel-loader as well:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
After this it worked for me. Your package.json should now be updated:
"devDependencies": {
"babel-core": "^5.4.2",
"babel-loader": "^5.0.0",
Is now
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
I got the app up and running like this
$ gulp
[21:16:33] Requiring external module babel-register
(node:10132) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[21:16:34] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[21:16:34] Starting 'default'...
[21:16:34] Starting 'webpack'...
[21:16:40] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
bundle.js 2.36 MB 0 [emitted] main
bundle.js.map 2.74 MB 0 [emitted] main
[21:16:40] Finished 'webpack' after 5.19 s
[21:16:40] Starting 'serve'...
[21:16:40] Finished 'serve' after 102 ms
[21:16:40] Starting 'watch'...
[21:16:40] Finished 'watch' after 56 ms
[21:16:40] Finished 'default' after 5.37 s
[BS] Serving files from: client
by applying the following:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm uninstall stylus --save-dev
npm uninstall stylus-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install stylus --save-dev
npm install stylus-loader --save-dev
Many thanks for the inspiration and valuable answers!
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
Running yeoman generator "Webapp", I'm getting an error when running gulp serve. Here are the following versions for a better background :
sw_vers && node -e 'console.log(process.platform, process.versions)'
ProductName: Mac OS X
ProductVersion: 10.11.3
BuildVersion: 15D21
darwin { http_parser: '2.6.0',
node: '5.2.0',
v8: '4.6.85.31',
uv: '1.7.5',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '47',
openssl: '1.0.2e' }
node -v
v5.2.0
gulp -v
Requiring external module babel-register
CLI version 3.9.1
Local version 3.9.1
Finally the gulp serve error:
gulp serve
Requiring external module babel-register
\node_modules/babel-core/lib/transformation/file/options/option-manager.js:372
throw new Error("Couldn't find preset " + JSON.stringify(val) + " relative to directory " + JSON.stringify(dirname));
Does anybody have any idea what the problem could be, any suggestions?
Here's what I've tried:
npm uninstall gulp
npm install gulp
//with global flag and not
npm install --save-dev gulp
//installing babel-register manually w/wo global flag and --save-dev
npm install babel-register
npm cache clean
Also read through several of other posts with similar problem with no success, some of the following :
gulp serve: Failed to load external module babel-core/register
Requiring external module babel/register #726
babel was renamed to babel-core #727
Angular-Fullstack Requiring external module babel-register
yep, after running npm install --global gulp-cli I run gulp -v and I’ve got
Failed to load external module babel-register
Requiring external module babel-core/register
CLI version 1.2.1
Local version 3.9.1
then I updated CLI version to 3.9.1 (same as I have locally) but it did not help.
but when I downgrade CLI version to 3.9.0 it started work correct and message “Failed to load external module babel-register” not shown anymore.
Looks like 3.9.1 is buggy.
Run:
npm install -g gulp#3.9.0
hopefully it'll help you.
maybe this can help.
create .babelrc in your projects, and put this:
{
"presets": [
"es2015"
]
}
I have tried many ways explaining above, including
npm install --global gulp
npm install --save-dev gulp
etc for installation of gulp, but finally found solution by running below command, which change gulp to something gulp-cli on phpStorm command line.
npm install -D babel
npm install babel-cli babel-preset-es2015
me helped when i deleted and again installed both same version as global as local in the project directory the gulp and deleted and reinstal the babel-register.
sudo npm uninstall -g gulp
npm uninstall gulp
sudo npm install -g gulp#3.9.0
npm install gulp#3.9.0
npm uninstall babel-register
npm install babel-register