Inlining-css-via-postcss-import-in-gulp-gulpfile.js

gulpfile.js

/* eslint-env node */

var concat = require('gulp-concat'),
    atImport = require('postcss-import'),
    /* mqpacker = require('css-mqpacker'), */
    cssnano = require('cssnano'),
    cssnext = require('postcss-cssnext'),
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify');

var globs = {
  js: [
    'polyfills/**/*.js',
    'library/**/*.js',
    'components/**/*.js',
    'app/**/*.js'
  ],
  css: [
    'polyfills/**/*.css',
    'library/**/*.css',
    'components/**/*.css'
  ]
};

gulp.task('js', function () {
  return gulp
    .src(globs.js)
    .pipe(sourcemaps.init())
    .pipe(concat('bundle.js'))
    .pipe(uglify({ mangle: false }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('bundle'));
});

gulp.task('css', function () {
  return gulp
    .src(globs.css)
    .pipe(sourcemaps.init())
    .pipe(concat('bundle.css'))
    .pipe(postcss([
      atImport(),
      cssnext({
        autoprefixer: {
          browsers: ['IE >= 9']
        }
      }),
      cssnano()
    ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('bundle'));
});

gulp.task('build', gulp.parallel('js', 'css'));

gulp.task('watch', function () {
  gulp.watch(globs.js, gulp.series('js'));
  gulp.watch(globs.css, gulp.series('css'));
});

gulp.task('default', gulp.series('build', 'watch'));

hi @s10wen, my current gulp is 3.7.3, so I am sure I'll run into these when I upgrade. I'm new to gulp, so I'm afraid I'm a bit in the dark. I remember seeing some talk on the gitter chat, for postcss-cssnext or, postcss, for duplicate autoprefixers. You might check there?

FWIW here's the repo: https://github.com/RickCogley/RCC-Hugo2015/tree/master/src

Hello from the future. I used your stuff to improve my stuff and fix some problems I was having with PostCSS import stuff.

Hopefully this helps future web travelers.

var gulp    = require('gulp');
var gutil   = require('gulp-util');

// Load plugins:
var plugins = require('gulp-load-plugins')({
  pattern: [
    'gulp-*',
    'gulp.*',
    'browserify',
    'babelify',
    'vinyl-source-stream',
    'vinyl-buffer',
    'browser-sync',
    'autoprefixer',
  ]
});

// Source and destination paths for tasks:
var path = {
  src:   'app/src',
  dest:  'app/public',
  npm:   'node_modules',
};

var atImport = require("postcss-import")

gulp.task('styles', function () {
  var postcssplugins = [
    atImport(),
    // Autoprefix:
    plugins.autoprefixer({
      browsers: [
        'last 3 versions',
        'ie 8',
        'ie 9'
      ]
    })
  ];
  return gulp.src(path.src + '/styles/main.css')
    .pipe(plugins.postcss(postcssplugins))
    // Write main.css
    .pipe(gulp.dest(path.dest + '/styles'))
    .pipe(plugins.browserSync.stream())
    // Report file size:
    .pipe(plugins.size({ showFiles: true }))
    // Minify main.css and rename it to 'main.min.css':
    .pipe(plugins.cssnano())
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.size({ showFiles: true }))
    .pipe(gulp.dest(path.dest + '/styles'))
    .pipe(plugins.gzip())
    .pipe(plugins.rename('main.min.gz.css'))
    .pipe(plugins.size({ showFiles: true }))
    .pipe(gulp.dest(path.dest + '/styles'))
    .pipe(plugins.browserSync.stream())
    .on('error', gutil.log);
});