From ae593b940d529420bbe6f712d189a65741d9260f Mon Sep 17 00:00:00 2001 From: Mark Miller Date: Wed, 20 Feb 2019 16:08:55 -0800 Subject: [PATCH] Issue #7 add css.autoVendor config so that autoloading of css files can be disabled --- docs/config.md | 1 + docs/css.md | 5 +++- gulp-config.default.js | 1 + gulp_tasks/css.js | 62 ++++++++++++++++++++++-------------------- 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/docs/config.md b/docs/config.md index 7c04f0f..5963920 100644 --- a/docs/config.md +++ b/docs/config.md @@ -3,6 +3,7 @@ * __enabled__ - (Boolean) value that will enable or disable css related Gulp tasks. * __src__ - (Array) The location of all files to compile from SCSS to CSS. Notice the use of asterisks in the source path, `sass/**/*.scss`. This path is using `gulp-sass-glob` to get all files ending in .scss from all folders in source/sass. You can also exclude files by prefixing with `!` such as `!sass/exclude.scss` * __vendor__ - (Array) List of vendor CSS files to include in compilation. Compiles to `vendor.css`. +* __autoVendor__ - (Boolean) Set to `true` if you want css files automatically loaded into the `vendor.css` file from each npm package added as a dependency. It will first look for a `dist` folder in each package and then add the css files. If no `dist` folder is found then it will add all css files in the package. You can disable this, but it means that you will have to manually add any css file directly into the `vendor` array. This is useful if you find yourself spending more time excluding files and it would be simpler to explicitly add them manually. * __dest__ - The location to place the compiled CSS. * __flattenDestOutput__ - (Boolean) value for minification of compiled CSS. * __lint__ - Validate code standards with [sass-lint](https://github.com/sasstools/sass-lint). diff --git a/docs/css.md b/docs/css.md index e9b306c..3824086 100644 --- a/docs/css.md +++ b/docs/css.md @@ -19,7 +19,7 @@ The following Sass libraries have been added for ease in development: Use `--save` when a package needs to be added as a dependency to the browser. -The CSS in NPM Dependencies *will* automatically be compiled to the `vendor.css` files. +The CSS in NPM Dependencies *will* automatically be compiled to the `vendor.css` files if the `css:autoVendor` config is set to `true` (which is the default). It will attempt to only load CSS files in each package's `dist` directory, but if one can't be found it will load in all CSS within a package. If you don't want a file to be used then you can exclude it in the `gulp-config.yml` file. @@ -29,6 +29,9 @@ css: - '!node_modules/bootstrap/**/*.css' ``` +If you prefer not to auto-load every CSS file from a NPM Dependency then set the `css:autoVendor` config to `false`. You will now be required to manually add in each CSS file into the `css:vendor` config array that you want to include in the `vendor.css` file. Manually adding files can be helpful if you prefer to know exactly what is being loaded in. + + #### Node Include Paths If NPM (node.js) is used to add dev dependencies and libraries for Sass then it is helpful to add its `nodeFiles:includePaths` to the `gulp-config.yml` file. This allows shorter import names to work in Sass files. diff --git a/gulp-config.default.js b/gulp-config.default.js index a808b25..2e843b4 100644 --- a/gulp-config.default.js +++ b/gulp-config.default.js @@ -8,6 +8,7 @@ module.exports = { vendor: [ 'sass/vendor/**/*.css' ], + autoVendor: true, dest: 'dist/', flattenDestOutput: true, lint: { diff --git a/gulp_tasks/css.js b/gulp_tasks/css.js index 6ac91f6..46b04a3 100644 --- a/gulp_tasks/css.js +++ b/gulp_tasks/css.js @@ -58,39 +58,41 @@ module.exports = function (gulp, config, tasks) { gulp.task('css:vendor', 'Compile all vendor css (including NPM Dependencies) into a single vendor.css file', function () { let sources = []; - // Get CSS files from node_modules that are npm "dependencies". Ignores "devDependencies". - const buffer = fs.readFileSync('./package.json'); - const packageJson = JSON.parse(buffer.toString()); - - for (lib in packageJson.dependencies) { - let mainFileDir = './' + config.nodeFiles.dir + '/' + lib; - - // Look first for a "dist" directory. - if (fs.existsSync(mainFileDir + '/dist')) { - mainFileDir = mainFileDir + '/dist'; - } else { - // Parse the main file and get its directory to look for a "dist" directory. - var depPackageBuffer = fs.readFileSync(mainFileDir + '/package.json'); - var depPackage = JSON.parse(depPackageBuffer.toString()); - - if (depPackage.main) { - var mainFile = mainFileDir + '/' + depPackage.main; - var distDirPos; - - distDirPos = mainFile.lastIndexOf('/dist/'); - - if (distDirPos !== -1) { - mainFileDir = mainFile.substring(0, distDirPos) + '/dist'; + if (config.css.autoVendor) { + // Get CSS files from node_modules that are npm "dependencies". Ignores "devDependencies". + const buffer = fs.readFileSync('./package.json'); + const packageJson = JSON.parse(buffer.toString()); + + for (lib in packageJson.dependencies) { + let mainFileDir = './' + config.nodeFiles.dir + '/' + lib; + + // Look first for a "dist" directory. + if (fs.existsSync(mainFileDir + '/dist')) { + mainFileDir = mainFileDir + '/dist'; + } else { + // Parse the main file and get its directory to look for a "dist" directory. + var depPackageBuffer = fs.readFileSync(mainFileDir + '/package.json'); + var depPackage = JSON.parse(depPackageBuffer.toString()); + + if (depPackage.main) { + var mainFile = mainFileDir + '/' + depPackage.main; + var distDirPos; + + distDirPos = mainFile.lastIndexOf('/dist/'); + + if (distDirPos !== -1) { + mainFileDir = mainFile.substring(0, distDirPos) + '/dist'; + } } } - } - // Add all CSS files - sources.push(mainFileDir + '/**/*.css'); - // Ignore minified CSS files. - sources.push('!' + mainFileDir + '/**/*.min.css'); - // Ignore CSS files in a /test or /tests directory. - sources.push('!' + mainFileDir + '/(test|tests)/**/*'); + // Add all CSS files + sources.push(mainFileDir + '/**/*.css'); + // Ignore minified CSS files. + sources.push('!' + mainFileDir + '/**/*.min.css'); + // Ignore CSS files in a /test or /tests directory. + sources.push('!' + mainFileDir + '/(test|tests)/**/*'); + } } sources = sources.concat(config.css.vendor);