Как импортировать файлы js + json в другие файлы js, используя gulp? - PullRequest
0 голосов
/ 09 ноября 2019

Я новичок в gulp, в настоящее время работаю над проектом фрилансера, где мне дали заранее написанный gulpfile.js и попросили использовать его в проекте. Я привык упаковать модули, в которые легко импортировать и экспортировать JS-файлы, здесь я не понимаю, как связать один JS-файл с другим.

Я уже пытался добавить browserify для комплектации файловвместе, но когда я попытался добавить browserify (main.js) в задачу сценария gulpfile.js, я получил следующую ошибку: «browserify () не является функцией». Когда я запускаю gulp dev без использования, я получаю «ReferenceError: require is notfined».

схема моего проекта: - js (папка)> main.js, rooms.js, main. min.js;- шаблоны (папка)> rooms.json;

Я пытаюсь импортировать rooms.json и rooms.js в main.js, используя var rooms = require('../templates/rooms.json');

My gulpfile.js

  sass = require('gulp-sass'),
  browserSync = require('browser-sync').create(),
  autoprefixer = require('gulp-autoprefixer'),
  rename = require('gulp-rename'),
  svgmin = require('gulp-svgmin'),
  svgstore = require('gulp-svgstore'),
  cheerio = require('gulp-cheerio'),
  webp = require('gulp-webp'),
  imagemin = require('gulp-imagemin'),
  imageminPngquant = require('imagemin-pngquant'),
  imageminMozjpeg = require('imagemin-mozjpeg'),
  cssnano = require('gulp-cssnano'),
  uglify = require('gulp-uglify'),
  babel = require('gulp-babel');

// Development Tasks
// -----------------

// Start browserSync server
gulp.task('browserSync', function () {
  browserSync.init({
    server: {
      baseDir: '.'
    },
    notify: false
  });

  gulp.watch('./scss/**/**/*.scss', gulp.parallel('sass'));
  gulp.watch('./*.html').on('change', browserSync.reload);
  gulp.watch('./js/**/main.js', gulp.parallel('scripts'));
});

gulp.task('sass', function () {
  return gulp
    .src('./scss/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(
      autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
      })
    )
    .pipe(gulp.dest('./css'))
    .pipe(cssnano())
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream());
});

gulp.task('scripts', function () {
  return gulp
    .src('./js/main.js')
    .pipe(rename('main.min.js'))
    .pipe(babel({ presets: ['@babel/env'] }))
    .pipe(uglify())
    .pipe(gulp.dest('js/'))
    .pipe(browserSync.stream());
});

// Watchers
gulp.task('watch', gulp.series('sass', 'browserSync'));

// Optimization Tasks
gulp.task('webp', () =>
  gulp
    .src('./img/hero_*.{jpg,png}')
    .pipe(webp())
    .pipe(gulp.dest('./img/'))
);

gulp.task('imagemin', () =>
  gulp
    .src('img/*.{jpg,png}')
    .pipe(
      imagemin(
        [
          (imageminPngquant({
            speed: 1,
            quality: 98 //lossy settings
          }),
            imageminMozjpeg({
              quality: 90
            }))
        ],
        {
          verbose: true
        }
      )
    )
    .pipe(gulp.dest('img/'))
);

// Sprites
gulp.task('sprite', function () {
  return gulp
    .src('./img/icon-*.svg')
    .pipe(svgmin())
    .pipe(svgstore({ inlineSvg: true }))
    .pipe(
      cheerio({
        run: function ($) {
          $('[fill]').removeAttr('fill');
          $('svg').attr('style', 'display:none');
        },
        parserOptions: { xmlMode: true }
      })
    )
    .pipe(rename('sprite.svg'))
    .pipe(gulp.dest('./img/'));
});

gulp.task(
  'dev',
  gulp.series(
    gulp.parallel('sass', 'scripts', 'webp', 'imagemin', 'sprite'),
    'browserSync'
  )
);

Package.json

    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "gulpfile.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.3.4",
        "@babel/preset-env": "^7.7.1",
        "browser-sync": "^2.26.3",
        "cheerio": "^1.0.0-rc.2",
        "del": "^2.2.2",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^6.0.0",
        "gulp-babel": "^8.0.0",
        "gulp-cheerio": "^0.6.3",
        "gulp-concat": "^2.6.1",
        "gulp-cssnano": "^2.1.3",
        "gulp-declare": "^0.3.0",
        "gulp-gh-pages": "^0.5.4",
        "gulp-imagemin": "^4.1.0",
        "gulp-rename": "^1.4.0",
        "gulp-sass": "^3.2.1",
        "gulp-svgmin": "^1.2.3",
        "gulp-svgstore": "^6.1.0",
        "gulp-uglify": "^3.0.2",
        "gulp-webp": "^3.0.0",
        "gulp-wrap": "^0.15.0"
    },
    "dependencies": {
        "gulp-browserify": "^0.5.1",
        "gulp-cli": "^2.2.0",
        "imagemin-mozjpeg": "^8.0.0",
        "imagemin-pngquant": "^7.0.0",
        "tunnel-agent": "^0.6.0",
        "vinyl-source-stream": "^2.0.0"
    }
}```
...