Как правильно использовать модули в Gulp?

Question

[LackGi]

Здравствуйте. Пытаюсь разобраться с Gulp.
На текущий момент застрял на месте когда пытаюсь работать с js, элементарно не могу подключить jquery. Ругается на $ require is not defined. Я не понял как подключать его. Не понял как подключать скажем normalize и прочие модули из npm. То как я их подключил видимо не верно.

Вот сам gulpfile.coffe

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"
    }
}

Comments

[sim3x]

не используй кофе, пока не разберешься как js работает

[LackGi]

sim3x: Вообще не смотреть в сторону кофе? Или только когда опыт появится?

[dhat]

Как-то у вас все сложно, как для начинающего.

[LackGi]

dhat: Ну там просто последовательно выполняются задачи над сжатием, объединением и пр. Вроде все просто. Пока не застрял.

[sim3x]

LackGi: кофе = сахар для js
сейчас сахар уже есть внедряют в сам js

Лучше посмотри на него после получения опыта на чистом жс

[dhat]

LackGi: а зачем Стайлус вместе с Сасс?

[dhat]

И какая практическая цель применения normalize как модуля npm?

[LackGi]

dhat: В стайлусе я работаю, а сасс видимо остался, потому что пытался подключить normalize. А normalize нужен в виде модуля для того что не следить за обновлением. Вроде удобно было бы чем использовать его как require в стайлус файле. Вообще пытался отделить плагины от самой разработки.

Answer 1

[Alex]

В комментариях вам правильно говорят.
1. Не используйте кофе. Попробуйте для начала писать на чистом JS
2. Не подключайте библиотеки которые вам не нужны. Имею в виду если вам нужна библиотека для frontend - то и подключайте её во frontend. Если её функционал нужен именно для Gulp - тогда подключайте в Gulp.
3. Подключайте библиотеку внутри кода самого таска. Таким образом вы значительно ускорите сборку. Как пример для таска "clean" нужна только библиотека "del". Если поместить подключение библиотек внутрь каждого таска, то удастся избежать ненужной работы и сэкономить себе время.
4. И для простоты восприятия можно было бы каждый таск вынести в отдельный файл. А в gulpfile.js по средством того-же require() подключить нужный.

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

Comments

[LackGi]

Спасибо за ответ. А как быть с ошибкой $ require is not defined? Я понимаю природу возникновения, но не понимаю как решить его.

[Владимир Голубь]

используйте более новую версию node.js