I have the following package.json file:
{
"name": "ASP.NET",
"version": "1.0.0",
"devDependencies": {
"gulp": "3.8.11",
"gulp-inject": "1.5.0",
"gulp-util": "3.0.6",
"gulp-print": "1.1.0",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"gulp-load-plugins": "0.9.0",
"del": "1.2.0",
"wiredep": "3.0.0-beta",
"jshint": "2.8.0",
"jshint-stylish": "2.0.1"
}
}
var gulp = require('gulp'),
util = require('gulp-util'),
print = require('gulp-print'),
inject = require('gulp-inject'),
del = require('del'),
cssmin = require('gulp-cssmin'),
jshint = require('gulp-jshint')
uglify = require('gulp-uglify'),
wiredep = require('wiredep').stream,
bowerJson = require('./bower.json')
gulp = require('gulp'),
project = require('./project.json');
gulp.task('wiredep', function () {
log('Placing Bower Components from ' + paths.bowerComponents + ' in ' + paths.layoutPage)
return gulp
.src(paths.layoutPage)
.pipe(wiredep({
bowerJson: bowerJson,
directory: paths.bowerComponents,
ignorePath: '../..'
}))
.pipe($.inject(gulp.src([
paths.jsMain,
paths.jsContent])))
.pipe(gulp.dest(paths.layoutPage));
});
When I run this task for a bower.json I get the error:
[16:11:31] Using gulpfile C:\MyProject\src\MyProject\Gulpfile.js
[16:11:31] Starting 'wiredep'...
[16:11:31] Placing Bower Components from ./bower_components/ in ./Views/Shared/_Layout.cshtml
[16:11:31] 'wiredep' errored after 5.7 ms
Process terminated with code 1.
[16:11:31] ReferenceError: $ is not defined
Why is $ not defined and how can I get it defined?
What I tried is adding "jquery": "2.1.4",
to devDependencies in package.json.
By reading the gulpfile.js part of the gulp-inject
documentation I discovered that I do not need to put a $
in front of it. Requiring inject and referencing it directly works. E.g.,
var inject = require('gulp-inject'),
gulp.task('inject', ['wiredep'], function () {
log('Wire up the css and js into ' + paths.layoutPage);
return gulp
.src(paths.layoutPage)
.pipe(inject(gulp.src([paths.js, paths.css], { read: false }), { ignorePath: project.webroot }))
.pipe(gulp.dest(paths.layoutPagePath));
});
Using $
directly can I think be done with var $ = require('jquery')
and adding jquery to package.json. Correct me if I'm wrong.