# @studiometa/gulp-config > Gulp configuration Latest version **1.4.1** (published 2019-06-20) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @studiometa/gulp-config pnpm add @studiometa/gulp-config yarn add @studiometa/gulp-config bun add @studiometa/gulp-config ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.4.1 | | Published | 2019-06-20 | | First published | 2019-01-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=9 | | Dependencies | 34 | | Unpacked size | 87.6 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 3 | | Author | Studio Meta | | Maintainers | chuck-durst, jeremiewerner, perruche, titouanmathis | ## Links - npm: https://www.npmjs.com/package/@studiometa/gulp-config - Repository: https://github.com/studiometa/gulp-config - Homepage: https://github.com/studiometa/gulp-config#readme - Issues: https://github.com/studiometa/gulp-config/issues - npm.io page: https://npm.io/package/@studiometa/gulp-config ## Dependencies (34) - [del](https://npm.io/package/del.md) ^4.0.0 - [gulp](https://npm.io/package/gulp.md) ^4.0.0 - [sass](https://npm.io/package/sass.md) ^1.20.1 - [eslint](https://npm.io/package/eslint.md) ^5.12.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.11 - [gulp-if](https://npm.io/package/gulp-if.md) ^2.0.2 - [webpack](https://npm.io/package/webpack.md) ^4.29.6 - [gulp-cli](https://npm.io/package/gulp-cli.md) ^2.0.1 - [through2](https://npm.io/package/through2.md) ^3.0.0 - [vinyl-fs](https://npm.io/package/vinyl-fs.md) ^3.0.3 - [fancy-log](https://npm.io/package/fancy-log.md) ^1.3.3 - [stylelint](https://npm.io/package/stylelint.md) ^9.10.0 - [gulp-babel](https://npm.io/package/gulp-babel.md) ^8.0.0 - [sass-graph](https://npm.io/package/sass-graph.md) ^3.0.4 - [gulp-eslint](https://npm.io/package/gulp-eslint.md) ^5.0.0 - [gulp-filter](https://npm.io/package/gulp-filter.md) ^5.1.0 - [gulp-notify](https://npm.io/package/gulp-notify.md) ^3.2.0 - [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^3.0.1 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.4.5 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.5 - [browser-sync](https://npm.io/package/browser-sync.md) ^2.26.7 - [event-stream](https://npm.io/package/event-stream.md) ^4.0.1 - [gulp-postcss](https://npm.io/package/gulp-postcss.md) ^8.0.0 - [plugin-error](https://npm.io/package/plugin-error.md) ^1.0.1 - [pretty-error](https://npm.io/package/pretty-error.md) ^2.1.1 - [node-notifier](https://npm.io/package/node-notifier.md) ^5.3.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.3.4 - [gulp-clean-css](https://npm.io/package/gulp-clean-css.md) ^4.0.0 - [gulp-dart-sass](https://npm.io/package/gulp-dart-sass.md) ^0.9.1 - [gulp-stylelint](https://npm.io/package/gulp-stylelint.md) ^8.0.0 - [webpack-stream](https://npm.io/package/webpack-stream.md) ^5.2.1 - [gulp-sourcemaps](https://npm.io/package/gulp-sourcemaps.md) ^2.6.4 - [command-line-args](https://npm.io/package/command-line-args.md) ^5.0.2 - [node-sass-magic-importer](https://npm.io/package/node-sass-magic-importer.md) ^5.3.0 ## Recent versions - 1.4.1 (latest) — 2019-06-20 - 1.5.0-beta.30 (next) — 2023-04-04 - 1.5.0-beta.25 (beta) — 2019-09-24 - 1.5.0-beta.29 — 2023-04-04 - 1.5.0-beta.28 — 2023-04-04 - 1.5.0-beta.27 — 2023-04-04 - 1.5.0-beta.26 — 2023-04-04 - 1.5.0-beta.24 — 2019-09-24 - 1.5.0-beta.23 — 2019-09-06 - 1.5.0-beta.22 — 2019-09-03 - 1.5.0-beta.21 — 2019-09-03 - 1.5.0-beta.20 — 2019-09-03 - 1.5.0-beta.19 — 2019-09-02 - 1.5.0-beta.18 — 2019-09-02 - 1.5.0-beta.17 — 2019-09-02 - … 65 more at https://npm.io/package/@studiometa/gulp-config/versions ## README # Gulp Configuration [![NPM Version](https://img.shields.io/npm/v/@studiometa/gulp-config.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/gulp-config) [![NPM Beta Version](https://img.shields.io/npm/v/@studiometa/gulp-config/beta.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/gulp-config/v/beta) [![Dependency Status](https://img.shields.io/david/studiometa/gulp-config.svg?label=deps&style=flat-square)](https://david-dm.org/studiometa/gulp-config) [![devDependency Status](https://img.shields.io/david/dev/studiometa/gulp-config.svg?label=devDeps&style=flat-square)](https://david-dm.org/studiometa/gulp-config?type=dev) > Simplify your Gulp configuration to compile, lint, fix, compress and live-reload SCSS and JS files. ## Table of contents - [Usage](#usage) + [CLI options](#cli-options) - [Configuration](#configuration) + [Styles](#styles) * [`src`](#stylessrc-string) * [`glob`](#stylesglob-string) * [`dist`](#stylesdist-string) * [`postCssPlugins`](#stylespostcssplugins-array) * [`cleanCssOptions`](#stylescleancssoptions-object) * [`styleLintOptions`](#stylesstylelintoptions-object) + [Scripts](#scripts) * [`src`](#scriptssrc-string) * [`glob`](#scriptsglob-string) * [`dist`](#scriptsdist-string) * [`uglify`](#scriptsuglify-boolean) * [`uglifyOptions`](#scriptsuglifyoptions-object) * [`es6`](#scriptses6-boolean) * [`babelOptions`](#scriptsbabeloptions-object) * [`esModules`](#scriptsesmodules-boolean) * [`webpackOptions`](#scriptswebpackoptions-object) * [`ESLintOptions`](#scriptseslintoptions-object) + [Server](#server) * [`browserSyncOptions`](#serverbrowsersyncoptions-object) * [`watchers`](#serverwatchers-array) - [Contributing](#contributing) ## Usage Install the package with your Yarn: ```bash yarn add --dev @studiometa/gulp-config ``` Or with NPM: ```bash npm install --save-dev @studiometa/gulp-config ``` Create a file named `gulpfile.js` at the root of your project with the following: ```js const config = require('@studiometa/gulp-config'); module.exports = config.create({ styles: { src: './tests/src/styles', dist: './tests/dist/styles', }, scripts: { src: './tests/src/scripts', dist: './tests/dist/scripts', }, server: true, }); ``` You will then have the following tasks available: - `gulp styles-build` - `gulp styles-lint` - `gulp styles-format` - `gulp scripts-build` - `gulp scripts-lint` - `gulp scripts-format` - `gulp serve` The `gulp` default tasks will execute the build and lint tasks before the server one. The server tasks watch automatically for changes in the styles and scripts files to re-trigger the build and lint tasks. ### CLI options All the [defaults Gulp CLI flags](https://github.com/gulpjs/gulp-cli#flags) can be used when running a task, with the following custom ones:
Flag Short Flag Type Description
--diff-only -d Boolean Execute the given task only on files listed in your `git diff`.
--quiet -q Boolean Disable most of the system notifications to improve performance.
--fail-after-error Boolean Specific to the lint tasks, they will end with a non-zero error code if any error level warnings were raised.
## Configuration The main options object can contain 3 different keys : [`styles`](#styles), [`scripts`](#scripts) and [`server`](#server). If one of them is omitted, the corresponding tasks won't be created. Find below the description and default values for each configuration object. ### Styles #### `styles.src` _(String)_ The path to your SCSS files. ```js { src: 'src/styles', } ``` #### `styles.glob` _(String)_ The glob to match your SCSS files. ```js { glob: '**/*.scss', } ``` #### `styles.dist` _(String)_ The path where the compiled CSS files are saved. ```js { dist: 'dist/styles', } ``` #### `styles.postCssPlugins` _(Array)_ A list of PostCSS plugins to use. ```js { postCssPlugins: [ autoprefixer(), ], } ``` #### `styles.cleanCssOptions` _(Object)_ Options for the [`gulp-clean-css`](https://github.com/scniro/gulp-clean-css#options) plugin. ```js { cleanCssOptions: { level: 1, }, } ``` #### `styles.gulpSassOptions` _(Object)_ Options for the [`gulp-sass`](https://github.com/dlmanning/gulp-sass#options) plugin. It uses the [`node-sass-magic-importer`](https://github.com/maoberlehner/node-sass-magic-importer) by default to resolve `@import` in your SCSS files. ```js { importer: require('node-sass-magic-importer')({ disableImportOnce: true, }), } ``` #### `styles.styleLintOptions` _(Object)_ Options for the [`gulp-stylelint`](https://github.com/olegskl/gulp-stylelint#options) plugin. This configuration is used in both the `styles-lint` and `styles-format` tasks, with the `fix` options automatically set to `true` for the `styles-format` task. ```js { failAfterError: false, // forced to false, except if `--fail-after-error` is specified reporters: [ { formatter: 'string', console: true, }, ], } ``` ### Scripts #### `scripts.src` _(String)_ The path to your JS files. ```js { src: 'src/scripts', } ``` #### `scripts.glob` _(String)_ The glob to match your JS files. ```js { glob: '**/*.js', } ``` #### `scripts.dist` _(String)_ The path where the uglified and/or compiled JS files are saved. ```js { dist: 'dist/scripts', } ``` #### `scripts.uglify` _(Boolean)_ Whether to run or not [`gulp-uglify`](https://github.com/terinjokes/gulp-uglify/) on the Javascript files. ```js { uglify: true, } ``` #### `scripts.uglifyOptions` _(Object)_ Options for the [`gulp-uglify`](https://github.com/terinjokes/gulp-uglify/#options) plugin. ```js { uglifyOptions: { compress: { drop_console: true, }, }, } ``` #### `scripts.es6` _(Boolean)_ Enable/Disable es6 scripts compilation. ```js { es6: false, } ``` #### `scripts.babelOptions` _(Object)_ Options for the [`gulp-babel`](https://github.com/babel/gulp-babel) plugin. ```js { babelOptions: { presets: [ '@babel/preset-env' ], }, } ``` #### `scripts.esModules` _(Boolean)_ Enable/Disable es6 modules resolution with [Webpack](https://webpack.js.org/). ```js { esModules: false, } ``` #### `scripts.webpackOptions` _(Object)_ Options for the [`webpack-stream`](https://github.com/shama/webpack-stream) plugin. ```js { webpackOptions: { mode: 'production', devtool: false, module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', }, }, ], }, }, } ``` #### `scripts.ESLintOptions` _(Object)_ Options for the `gulp-eslint` plugin. Check for a `.eslintrc` file in your project by default. This configuration object is used in both the `scripts-lint` and `scripts-format` tasks, with the `fix` options automatically set to `true` for the `scripts-format` task. ```js { ESLintOptions: { useEslintrc: true, }, } ``` ### Server You can simply enable the server task by setting the `server` key to `true` in your configuration. But you might want to set some more detailed configuration with extra watchers for example. #### `server.browserSyncOptions` _(Object)_ Options for the [`browser-sync`]() plugin. ```js { browserSyncOptions: { watchTask: true, open: false, proxy: process.env.APP_HOST || false, }, } ``` > If your project is using a `.env` file, you can load it in your `gulpfile.js` file with the [`dotenv`](https://github.com/motdotla/dotenv) package and set a variable named `APP_HOST` to take advantage of the default browser-sync configuration. The server setup by browser-sync will then be proxied on the port 3000 of the host you defined, you will have live-reload enabled by accessing `http://APP_HOST:3000`. Example of configuration to enable browserSync with `https://`: ```js { browserSyncOptions: { proxy: 'https://local.fqdn.com', https: { key: 'path/to/your/key.pem', cert: '/path/to/your/cert.pem', }, }, } ``` > You can easliy create a valid certificate for your local domain `local.fqdn.com` with the help of [`mkcert`](https://github.com/FiloSottile/mkcert) and the following command: > ```bash > mkcert local.fqdn.com fqdn.com localhost 127.0.0.1 > ``` #### `server.watchers` _(Array)_ A list of files you want to watch when the server is running. It allows you to execute custom tasks and callbacks when the given files or glob changes. By default, the build tasks (`styles-build` and `scripts-build`) and the lint tasks (`styles-lint` and `scripts-build`) are triggered when any of the files found in the `styles.src` and `scripts.src` paths changes. The following example will watch for changes in your HTML files and trigger a browser-sync reload and execute the `styles-build` task: ```js { files: [ '**/*.html' ], options: { cwd: 'path/to/your/files', }, callbacks: [ { event: 'change', // 'add', 'change' or 'unlink' callback: (browserSync) => browserSync.reload(), }, ], tasks: [ 'styles-build', ], } ``` See the [Gulp documentation](https://gulpjs.com/docs/en/api/watch) on the `watch` method for more detailed information on how a watcher works. ## Contributing This project's branches are managed with [Git Flow](https://github.com/petervanderdoes/gitflow-avh), every feature branch must be merged into develop via a pull request. --- _Source: https://npm.io/package/@studiometa/gulp-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._