What is the correct way to use modules in Gulp?

Question

JavaScript

Hello. I'm trying to figure out with Gulp.
At the moment I'm stuck in place when I try to work with js, I just can't connect jquery. Swears at $ require is not defined . I didn't understand how to connect it. I didn’t understand how to connect, say, normalize and other modules from npm. The way I connected them seems to be wrong.
Here is the gulpfile.coffe itself

gulp = require 'gulp'
connect = require 'gulp-connect'
pug = require 'gulp-pug'
normalize = require 'node-normalize-scss'
stylus = require 'gulp-stylus'
sass = require 'gulp-sass'
postcss = require 'gulp-postcss'
autoprefixer = require 'autoprefixer'
lost = require 'lost'
imagemin = require 'gulp-imagemin'
coffee = require 'gulp-coffee'
uglify = require 'gulp-uglify'
concat = require 'gulp-concat'
clean = require 'gulp-clean'
del = require 'del'
browserify = require 'browserify'

jquery = require 'gulp-jquery'

gulp.task 'connect', ->
  connect.server
    port: 8888
    livereload: on
    root: './dist'

gulp.task 'views', ->
  gulp.src 'app/views/*.pug'
    .pipe do pug
    .pipe gulp.dest 'dist'
    .pipe do connect.reload

gulp.task 'images', ->
  gulp.src 'app/assets/images/*'
    .pipe do imagemin
    .pipe gulp.dest 'dist/img'

gulp.task 'sweetalert2.css', ->
  gulp.src 'node_modules/sweetalert2/dist/sweetalert2.css'
    .pipe gulp.dest 'dist/temp/css'

gulp.task 'normalize', ->
  gulp.src 'node_modules/node-normalize-scss/_normalize.scss'
    .pipe gulp.dest 'dist/temp/css'

gulp.task 'stylesheets', ['normalize', 'sweetalert2.css'], ->
  processors = [
    autoprefixer browsers: 'last 2 version'
    lost
  ]
  gulp.src [
    'dist/temp/css/_normalize.scss'
    'dist/temp/css/sweetalert2.css'
    'app/assets/stylesheets/*.styl'
  ]
  .pipe do stylus
  .pipe concat 'app.css'
  .pipe postcss(processors)
  .pipe gulp.dest 'dist/css'
  .pipe do connect.reload

gulp.task 'jquery', ->
  jquery.src
    release: 2
    flags: [
      '-deprecated'
      '-event/alias'
      '-ajax/script'
      '-ajax/jsonp'
      '-exports/global'
    ]
  .pipe gulp.dest 'dist/temp/js'

gulp.task 'coffee', ->
  gulp.src 'app/assets/javascripts/*.coffee'
    .pipe do coffee
    .pipe gulp.dest 'dist/temp/js'

gulp.task 'sweetalert2.js', ->
  gulp.src 'node_modules/sweetalert2/dist/sweetalert2.js'
    .pipe gulp.dest 'dist/temp/js'

gulp.task 'javascripts', ['jquery', 'sweetalert2.js', 'coffee'], ->
  gulp.src [
    'dist/temp/js/jquery.custom.js'
    'dist/temp/js/sweetalert2.js'
    'dist/temp/js/app.js'
  ]
  .pipe concat 'app.js'
  .pipe do uglify
  .pipe gulp.dest 'dist/js'
  .pipe do connect.reload

  # gulp.src 'dist/temp', read: no
  #   .pipe do clean

gulp.task 'watch', ->
  gulp.watch 'app/views/*.pug', ['views']
  gulp.watch 'app/assets/images/*.png', ['images']
  gulp.watch 'app/assets/stylesheets/*.styl', ['stylesheets']
  gulp.watch 'app/assets/javascripts/*.coffee', ['javascripts']

gulp.task 'clean', ->
  del.sync 'dist'

gulp.task 'default', ['clean', 'images', 'stylesheets', 'javascripts', 'views', 'connect', 'watch']

package.json

{
    "private": true,
    "devDependencies": {
        "coffee-script": "^1.10.0 ",
        "browserify": "^13.1.0",
        "browserify-shim": "^3.8.12",
        "gulp": "^3.9.1",
        "gulp-connect": "^5.0.0",
        "node-normalize-scss": "^1.3.2",
        "gulp-stylus": "^2.5.0",
        "gulp-sass": "^2.3.2",
        "gulp-postcss": "^6.2.0",
        "gulp-autoprefixer": "^3.1.1",
        "lost": "^7.1.0",
        "gulp-imagemin": "^3.0.3",
        "gulp-coffee": "^2.3.2",
        "pug": "^2.0.0-beta6",
        "gulp-pug": "^3.0.4",
        "gulp-uglify": "^2.0.0",
        "gulp-concat": "^2.6.0",
        "gulp-clean": "^0.3.2",
        "del": "^2.2.2",
        "gulp-jquery": "^1.1.2",
        "sweetalert2": "^4.2.7"
    },
    "dependencies": {
        "jquery": "^3.1.0"
    }
}

Answer 1

The comments tell you right.
1. Don't use coffee. Try to start writing in pure JS
2. Do not include libraries that you do not need. I mean, if you need a library for frontend, then include it in frontend. If its functionality is needed specifically for Gulp, then connect it to Gulp.
3. Include the library inside the code of the task itself. This way you will significantly speed up the assembly. As an example, the "clean" task only needs the "del" library. If you put the library connection inside each task, you will be able to avoid unnecessary work and save yourself time.
4. And for ease of perception, each task could be moved to a separate file. And in gulpfile.js, use the same require() to connect the one you need.

// gulpfile.js
gulp.task('sass', function () {
    var sassTask = require('tasks/sassTask');
    return sassTask();
});