@LackGi

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

Здравствуйте. Пытаюсь разобраться с 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"
    }
}
  • Вопрос задан
  • 933 просмотра
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
В комментариях вам правильно говорят.
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();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Сбер Санкт-Петербург
от 250 000 ₽
NewGen Vision Санкт-Петербург
от 30 000 до 60 000 ₽
Сбер Москва
от 200 000 ₽
28 нояб. 2021, в 12:03
10000 руб./за проект
29 нояб. 2021, в 14:50
5000 руб./за проект