gulpasp.net-coregulp-inject

$ is not defined in Gulp task


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.


Solution

  • 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.