postcss project boilerplate

gulpfile.js

const {task, src, dest ,watch, series, parallel} = require('gulp');
const rename = require('gulp-rename');
const postcss = require('gulp-postcss');
const prettify = require('gulp-jsbeautifier');
const connect = require('gulp-connect');

const postcssConfig = require('./postcss.config.js');
const cssOutput = './css';
const postcssWatchFiles = ['./pcss/**/[^_]*.pcss', '!node_modules/**'];

task('connect', () => {
  connect.server({
    root: './',
    livereload: true
  });
});

task('html', () => {
    return src(['./html/**/*.html'])
        .pipe(connect.reload())
})

task('pcss', () => {
    return src(postcssWatchFiles)
        .pipe(postcss(postcssConfig))
        .pipe(prettify({
            css: {
                file_types: ['.pcss'],
            },
            indent_size: 2,
            selector_separator_newline: false,
            // newline_between_rules: false,
            preserve_newlines: false,
            end_with_newline: true
        }))
        .pipe(rename({
            extname: '.css'
        }))
        .pipe(dest(cssOutput))
        .pipe(connect.reload())
});

task('watch', () => {
    watch(postcssWatchFiles, series('pcss'));
    watch(['./html/**/*.html'], series('html'));
});

task('default', parallel('connect', 'watch'), () => {});

package.json

{
  "name": "postcss-project-boilerplate",
  "version": "1.0.0",
  "description": "postcss boilerplate",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://repo.git"
  },
  "author": "hoyangtsai",
  "license": "ISC",
  "bugs": {
    "url": "https://repo/issues"
  },
  "homepage": "https://repo#readme",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-connect": "^5.7.0",
    "gulp-jsbeautifier": "^3.0.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "postcss-assets": "^5.0.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^12.0.1",
    "postcss-nested": "^4.1.2",
    "postcss-normalize-charset": "^4.0.1",
    "postcss-scss": "^2.0.0",
    "postcss-strip-inline-comments": "^0.1.5"
  }
}

postcss.config.js

const packageJson = require('./package.json');
const browsers = packageJson.browserslist || ['>= 5%', 'Android 4.2'];

module.exports = {
    syntax: require('postcss-scss'),
    plugins: [
        require('postcss-import')({
            filter: (filename) => {
                return false
                // if (/common.+\.css$/.test(filename)) {
                //     return false;
                // }
                // return true;
            }
        }),
        require('postcss-strip-inline-comments'),
        require('postcss-assets')({}),
        // require('postcss-inline-svg')({}),
        require('postcss-nested'),
        require('postcss-normalize-charset'),
        require('postcss-cssnext')({ 
            browsers: browsers,
            features: {
                rem: false
            }
        })
    ]
};