D
D
Dmitry Dmitrievich2019-08-22 23:11:48
gulp.js
Dmitry Dmitrievich, 2019-08-22 23:11:48

Why does not concatenate files already translated into less?

//Подключаем модули галпа
  const gulp 			= require('gulp');
  const concat    	= require('gulp-concat');
  const autoprefixer  = require('gulp-autoprefixer');
  const cleanCSS 		= require('gulp-clean-css');
  const uglify        = require('gulp-uglify');
  const del			= require('del');
  const browserSync 	= require('browser-sync').create();
  const less 			= require('gulp-less');
  const path 			= require('path');


  //Порядок подключения css файлов
  const cssFiles = [
    './src/css/main.css',
    './src/css/media.css'
  ]

  //Порядок подключения less файлов
  const lessFiles=[
    './src/less/main.css',
    './src/less/media.css'
  ]
  //Порядок подключения js файлов
  const jsFiles= [
    'src/js/lib.js',
    'src/js/main.js'
  ]

  //Таск на стили CSS
  function styles() {
    //Шаблон для поиска файлов CSS
    //Все файлы по шаблону './src/less/**/*.css'
    return gulp.src('./src/less/**/*.less')

    //Перевод less  в css
    .pipe(less({
      		paths:[ path.join(__dirname, 'less', 'includes') ]
    	}))

    .pipe(gulp.dest('./src/css'));

    gulp.src('./src/less/**/*.css')

    //Объединение файлов в один
    .pipe(concat('styles.css'))
    
    
    //Минификация файлов
    .pipe(cleanCSS({level:2}))
    
    //Выходная папка для стилей
    .pipe(gulp.dest('./build/css'))
    .pipe(browserSync.stream())

  }

  //Tacк на скрипты js
  function scripts(){
    //Шаблон для поиска файлов JS
    //Все файлы по шаблону './src/js/**/*.js'
    return gulp.src(jsFiles)

    //Объединение файлов в один
    .pipe(concat('script.js'))

    //Минификация JS
    .pipe(uglify({
      toplevel:true
    }))

    //Выходная папка для скриптов
    .pipe(gulp.dest('build/js'))
    .pipe(browserSync.stream());

  }

  function clean() {
    return del(['build/*'])
  }

  function watch(){
    browserSync.init({
        	server: {
            	baseDir: "./"
        	}
    	});
    //Следить за CSS файлами
    gulp.watch('./src/css/**/*.css',styles)
    //Следить за JS файлами
    gulp.watch('./src/jss/**/*.js',scripts)
    //При изменении HTML запустить синхронизацию
    gulp.watch("./*.html").on('change',browserSync.reload);
  }

  //Таск вызывающий функцию styles
  gulp.task('styles', styles);
  //Таск вызывающий функцию scripts
  gulp.task('scripts', scripts);
  //Таск удаления внутри корневого файла
  gulp.task('del', clean);
  //Таск для отслеживания изменений 
  gulp.task('watch',watch);
  //Таск для удалния файлов в папке build и запуск styles и scripts
  gulp.task('build', gulp.series(clean, gulp.parallel(styles, scripts)))
  //Таск запускает таск build и watch последовательно
  gulp.task('dev',gulp.series('build','watch'));

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry Dmitrievich, 2019-08-23
@HimHimuch

Gets all files in less format
-------------------------------------
Task solved by splitting the styles function into two
and calling the gulp task via gulp.series()

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question