I
I
Il6ko2017-07-01 22:41:42
Sass
Il6ko, 2017-07-01 22:41:42

How to fix Autoprefixer Error: Missed semicolon in sass?

Hello! I ask you for help! In separate _.sass styles connected to the main file, when saving, it gives an error Autoprefixer Error: Missed semicolon!
Here is my gulpfile:

var gulp 				 = require('gulp'),
    sass 				 = require('gulp-sass'),
    browserSync  = require('browser-sync'),
    del          = require('del'),
    imagemin     = require('gulp-imagemin'), 
    pngquant     = require('imagemin-pngquant'),
    autoprefixer = require('gulp-autoprefixer'),
    spritesmith  = require('gulp.spritesmith');
    


gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass') // Берем источник
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))	// Преобразуем Sass в CSS посредством gulp-sass
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
    .pipe(gulp.dest('app/css'))					// Выгружаем результата в папку app/css
    .pipe(browserSync.reload({stream: true}))// Обновляем CSS на странице при изменении
});


gulp.task('browser-sync', function(){
  browserSync({					// Выполняем browserSync
    server: {						// Определяем параметры сервера
      baseDir: 'app'    // Директория для сервера - app
    },
    notify: false       // Отключаем уведомления
  });
});


gulp.task('cleansprite', function () {
  return del.sync('app/img/sprites/sprite.png');
});

gulp.task('sprite', function () {
  var spriteData = gulp.src('app/img/sprites/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.sass',
    imgPath: '../img/sprites/sprite.png',
    padding: 15
  }));
  spriteData.pipe(gulp.dest('app/img/sprites/')); // путь, куда сохраняем картинку
  spriteData.css.pipe(gulp.dest('app/sass/')); // путь, куда сохраняем стили
});


gulp.task('watch', ['browser-sync', 'sass'], function(){
  gulp.watch('app/sass/**/*.sass', ['sass']);      // Наблюдение за sass файлами в папке sass
  gulp.watch('app/*.html', browserSync.reload);		// Наблюдение за HTML файлами в корне проекта
  gulp.watch('app/js/**/*.js', browserSync.reload); // Наблюдение за JS файлами в папке js
});


gulp.task('default', ['watch']);


gulp.task('clean', function() {
  return del.sync('dist'); // Удаляем папку dist перед сборкой
});


gulp.task('img', function() {
  return gulp.src('app/img/**/*') // Берем все изображения из app
    .pipe(imagemin({  // Сжимаем их с наилучшими настройками с учетом кеширования
      interlaced: true,
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
});


gulp.task('build', ['clean', 'img', 'sass'], function() {

  var buildCss = gulp.src( // Переносим библиотеки в продакшен
    'app/css/main.css')
  .pipe(gulp.dest('dist/css'))

  var buildFonts = gulp.src('app/fonts/**/*') // Переносим шрифты в продакшен
  .pipe(gulp.dest('dist/fonts'))

  var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен
  .pipe(gulp.dest('dist/js'))

  var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
  .pipe(gulp.dest('dist'));

});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question