gulpfile.js

gulpfile.js

'use strict';

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync');
const reload = browserSync.reload;

gulp.task('build:css', ['lint:css'], function () {
  const postcss = require('gulp-postcss');
  const nano = require('gulp-cssnano');

  return gulp.src('./src/css/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([
      require('autoprefixer'),
      require('postcss-partial-import'),
      require('postcss-simple-vars'),
      require('postcss-nested'),
      require('postcss-mixins')
    ]))
    .pipe(nano())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./build/'))
    .pipe(reload({ stream: true }));
});

gulp.task('lint:css', function () {
  const stylelint = require('gulp-stylelint');

  return gulp.src('./src/**/*.css')
    .pipe(stylelint({
      failAfterError: false,
      reporters: [{
        formatter: 'string',
        console: true
      }]
    }));
});

gulp.task('build:html', function() {
  return gulp.src('./src/*.html')
    .pipe(gulp.dest('./build/'))
    .pipe(reload({ stream: true }));
});

gulp.task('build', [
  'build:css',
  'build:html'
]);

gulp.task('webserver', function() {
  browserSync({
    server: {
      baseDir: './build'
    },
    tunnel: false,
    host: 'localhost',
    port: 9090,
    logPrefix: 'frontend'
  });
});

gulp.task('watch', function() {
  const watch = require('gulp-watch');

  watch(['./src/**/*.css'], function() {
    gulp.start('build:css');
  });

  watch(['./src/*.html'], function() {
    gulp.start('build:html');
  });
});

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

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp": "./node_modules/gulp/bin/gulp.js"
  },
  "author": "Irina Sokolovskaja",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-core": "^6.7.7",
    "babel-preset-es2015": "^6.6.0",
    "browser-sync": "^2.12.5",
    "gulp": "^3.9.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-postcss": "^6.1.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-stylelint": "^2.0.2",
    "gulp-watch": "^4.3.5",
    "postcss-import": "^8.1.0",
    "postcss-mixins": "^4.0.1",
    "postcss-nested": "^1.0.0",
    "postcss-partial-import": "^1.3.0",
    "postcss-simple-vars": "^1.2.0",
    "precss": "^1.4.0",
    "stylefmt": "^3.2.1",
    "stylelint-config-standard": "^6.0.0"
  }
}