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'));

Thanks, I found this useful, I'm just using it for css and have:

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

var globs = {
  css: [
    '_site/css/main.css'
  ]
};

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('css'));

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

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

Running gulp css I get:

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.
Note: If, for a really specific reason, postcss-cssnext warnings are irrelevant for your use case, and you really know what you are doing, you can disable this warnings by setting  'warnForDuplicates' option of postcss-cssnext to 'false'.

I believe cssnano includes autoprefixer as well, so going to look at adding cssnano options and setting autoprefixer to default there. Wondering if there's a better solution?

Also if I uncomment the bottom section and run gulp build I get:

/Users/owensi/GitHub/upfront2016/gulpfile.js:34
gulp.task('build', gulp.parallel('css'));
                        ^

TypeError: gulp.parallel is not a function
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:192:16)
    at module.exports (/usr/local/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)

Wondering if this is a gulp 4 issue? (I'm using 3.9.1)

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);
});