Giter Club home page Giter Club logo

gulp-boilerplate's Introduction

Gulp Boilerplate Build Status

A boilerplate for building web projects with Gulp. Uses Gulp 4.x.

IMPORTANT: This project is no longer maintained, and is offered as-is. It is strongly recommended that you instead use my Build Tool Boilerplate.

Features

  • Concatenate, minify, and lint JavaScript.
  • Compile, minify, autoprefix, and lint Sass.
  • Optimize SVGs.
  • Copy static files and folders into your dist directory.
  • Automatically add headers and project details to JS and CSS files.
  • Create polyfilled and non-polyfilled versions of JS files.
  • Watch for file changes, and automatically recompile build and reload webpages.

Gulp Boilerplate makes it easy to turn features on and off, so you can reuse it for all of your projects without having to delete or modify tasks.

Getting Started

Dependencies

Note: if you've previously installed Gulp globally, run npm rm --global gulp to remove it. Details here.

Make sure these are installed first.

Quick Start

  1. In bash/terminal/command line, cd into your project directory.
  2. Run npm install to install required files and dependencies.
  3. When it's done installing, run one of the task runners to get going:
    • gulp manually compiles files.
    • gulp watch automatically compiles files and applies changes using BrowserSync when you make changes to your source files.

Try it out. After installing, run gulp to compile some test files into the dist directory. Or, run gulp watch and make some changes to see them recompile automatically.

Documentation

Add your source files to the appropriate src subdirectories. Gulp will process and and compile them into dist.

  • JavaScript files in the src/js directory will be compiled to dist/js. Files in subdirectories under the js folder will be concatenated. For example, files in js/detects will compile into detects.js.
  • Files in the src/sass directory will be compiled to dist/css.
  • SVG files placed in the src/svg directory will be optimized with SVGO and compiled into dist/svg.
  • Files and folders placed in the copy directory will be copied as-is into the dist directory.

package.json

The package.json file holds all of the details about your project.

Some information is automatically pulled in from it and added to a header that's injected into the top of your JavaScript and CSS files.

{
	"name": "project-name",
	"version": "0.0.1",
	"description": "A description for your project.",
	"main": "./dist/your-main-js-file.js",
	"author": {
		"name": "YOUR NAME",
		"url": "http://link-to-your-website.com"
	},
	"license": "MIT",
	"repository": {
		"type": "git",
		"url": "http://link-to-your-git-repo.com"
	},
	"devDependencies": {}
}

Note: devDependencies are the dependencies Gulp uses. Don't change these or you'll break things. If any of the other fields are removed, make sure to remove reference to them in the Header (under var banner in gulpfile.js) or gulp watch won't run.

JavaScript

Put your JavaScript files in the src/js directory.

Files placed directly in the js folder will compile directly to dist/js as both minified and unminified files. Files placed in subdirectories under src/js will also be concatenated into a single file. For example, files in js/detects will compile into detects.js.

A note about polyfills: In subdirectories that contain files with the .polyfill.js suffix (for example, _matches.polyfill.js), two versions will be created: one with the polyfill files, and one without.

Sass

Put your Sass files in the src/sass directory.

Gulp generates minified and unminified CSS files. It also includes autoprefixer, which adds vendor prefixes for you.

SVGs

Place SVG files in the src/svg directory.

SVG files will be optimized with SVGO and compiled into dist/svg.

Copy Files

Files and folders placed in the src/copy directory will be copied as-is into dist.

This is a great place to put HTML files, images, and pre-compiled assets.

Options & Settings

Gulp Boilerplate makes it easy to customize for projects without having to delete or modify tasks.

Options and settings are located at the top of the gulpfile.js.

Settings

Set features under the settings variable to true to turn them on (default), and false to turn them off.

/**
 * Settings
 * Turn on/off build features
 */

var settings = {
	clean: true,
	scripts: true,
	polyfills: true,
	styles: true,
	svgs: true,
	copy: true,
	reload: true
};

Paths

Adjust the input and output paths for all of the Gulp tasks under the paths variable. Paths are relative to the root project folder.

/**
 * Paths to project folders
 */

var paths = {
	input: 'src/',
	output: 'dist/',
	scripts: {
		input: 'src/js/*',
		// polyfills: '!src/js/*.polyfill.js',
		polyfills: '.polyfill.js',
		output: 'dist/js/'
	},
	styles: {
		input: 'src/sass/**/*.{scss,sass}',
		output: 'dist/css/'
	},
	svgs: {
		input: 'src/svg/*.svg',
		output: 'dist/svg/'
	},
	copy: {
		input: 'src/copy/*',
		output: 'dist/'
	},
	reload: './dist/'
};

Header

Gulp auto-injects a header into all of your JavaScript and CSS files with details from your package.json file.

You can change what's included under the banner variable.

/**
 * Template for banner to add to file headers
 */

var banner = {
	full:
		'/*!\n' +
		' * <%= package.name %> v<%= package.version %>\n' +
		' * <%= package.description %>\n' +
		' * (c) ' + new Date().getFullYear() + ' <%= package.author.name %>\n' +
		' * <%= package.license %> License\n' +
		' * <%= package.repository.url %>\n' +
		' */\n\n',
	min:
		'/*!' +
		' <%= package.name %> v<%= package.version %>' +
		' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
		' | <%= package.license %> License' +
		' | <%= package.repository.url %>' +
		' */\n'
};

License

The code is available under the MIT License.

gulp-boilerplate's People

Contributors

begroff avatar castria avatar cferdinandi avatar iandanforth avatar samodum avatar yturovtsev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gulp-boilerplate's Issues

Questions on gulp boilerplate

Hi Chris,

I always used tools like Brackets to work with kraken, I am now loving the gulp boiler plate. Can you please answer a couple of questions and help a gulp newbie:

  1. I love how the Docs are implemented, i tried to do something similar for html files and failed - any help/code most appreciated.

    Idea: All .md files in src folder are combined with header and footer files in src/templates folder and saved to dist folder as .html files. Can we add comments at top of .md file so that each generated file has correct meta-description and title.

  2. Implementing Add ons: Whats you process for implementing an add on (eg drop down menu), do you copy in .css and .js files into src/css an src/js folder individually and then @import them?

  3. Tests: don't understand jasmine and karma - any notes or tuts you can point me to?
    As always, many thanks for sharing...

Cheers,
vj

Gulp watch not working

Fix:

// Spin up livereload server and listen for file changes
gulp.task('server', function () {
    livereload.listen();
    gulp.watch(paths.input).on('change', function(file) {
        gulp.start('default');
        gulp.start('refresh');
    });
});

// Run livereload after file change
gulp.task('refresh', ['default'], function () {
    livereload.changed();
});

// Compile files and livereload pages when something changes
gulp.task('watch', [
    'server',
    'default'
]);

Remove SVG fill properties from the build

Use gulp-cheerio: https://github.com/w0rm/gulp-svgstore#transform-svg-sources-or-combined-svg

"gulp-cheerio": "0.6.2"

var cheerio = require('gulp-cheerio');

// Generate SVG sprites
gulp.task('build:svgs', ['clean:dist'], function () {
    return gulp.src(paths.svgs.input)
        .pipe(plumber())
        .pipe(tap(function (file, t) {
            if ( file.isDirectory() ) {
                var name = file.relative + '.svg';
                return gulp.src(file.path + '/*.svg')
                    .pipe(svgmin())
                    .pipe(cheerio({
                        run: function ($) {
                            $('[fill]').removeAttr('fill');
                        },
                        parserOptions: { xmlMode: true }
                    }))
                    .pipe(svgstore({
                        fileName: name,
                        prefix: 'icon-',
                        inlineSvg: true
                    }))
                    .pipe(gulp.dest(paths.svgs.output));
            }
        }))
        .pipe(svgmin())
        .pipe(cheerio({
            run: function ($) {
                $('[fill]').removeAttr('fill');
            },
            parserOptions: { xmlMode: true }
        }))
        .pipe(svgstore({
            fileName: 'icons.svg',
            prefix: 'icon-',
            inlineSvg: true
        }))
        .pipe(gulp.dest(paths.svgs.output));
});

gulp-cssnano deprecated for cssnano

Looks like gulp-cssnano is now deprecated and recommends using cssnano via PostCSS instead. I am getting npm audit vulnerabilities:

Package: js-yaml
Patched in: >=3.13.0
Dependency of: gulp-cssnano [dev]
Path: gulp-cssnano > cssnano > postcss-svgo > svgo > js-yaml
More info: https://npmjs.com/advisories/788

High: Code Injection
Package: js-yaml
Patched in: >=3.13.1
Dependency of: gulp-cssnano [dev]
Path: gulp-cssnano > cssnano > postcss-svgo > svgo > js-yaml
More info: https://npmjs.com/advisories/813

Add browserify to te boilerplate

Hi,
I've added to the boilerplate Babel to transpile Es6 to Es5.
Do you know how can I add Browserify for require modules?

Thanks in advance an regards,

Davide

Default configuration throwing error 'Task never defined'

Upon default configuration and following initial instructions, i'm trying to run the 'gulp' and 'gulp-watch' tasks, but am met with 'Task never defined' errors. Can't seem to figure out why. I'm running the latest Gulp and Gulp CLI.

See attached screenshot:

Screen Shot 2019-04-25 at 10 33 22 PM

Add SVG workflow

package.json

{
    "name": "gulp-boilerplate",
    "version": "0.2.0",
    "description": "My Gulp.js boilerplate for creating new web projects",
    "author": {
        "name": "Chris Ferdinandi",
        "url": "http://gomakethings.com"
    },
    "license": "MIT",
    "repository": {
        "type": "git",
        "url": "http://github.com/cferdinandi/Plugin"
    },
    "devDependencies": {
        "gulp": "~3.8.0",
        "gulp-autoprefixer": "0.0.7",
        "gulp-clean": "^0.2.4",
        "gulp-concat": "~2.2.0",
        "gulp-flatten": "~0.0.2",
        "gulp-tap": "~0.1.1",
        "gulp-header": "^1.0.2",
        "gulp-jshint": "^1.6.1",
        "gulp-karma": "0.0.4",
        "gulp-minify-css": "~0.3.4",
        "gulp-plumber": "~0.6.2",
        "gulp-rename": "~1.1.0",
        "gulp-sass": "~0.7.2",
        "gulp-uglify": "~0.3.0",
        "gulp-svgstore": "~0.0.7",
        "gulp-svgmin": "~0.4.6",
        "jshint-stylish": "^0.2.0",
        "karma": "^0.12.16",
        "karma-coverage": "^0.2.4",
        "karma-jasmine": "~0.2.0",
        "karma-phantomjs-launcher": "^0.1.4",
        "karma-spec-reporter": "0.0.13",
        "karma-htmlfile-reporter": "~0.1"
    }
}

gulpfile.js

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var clean = require('gulp-clean');
var rename = require('gulp-rename');
var flatten = require('gulp-flatten');
var tap = require('gulp-tap');
var header = require('gulp-header');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var karma = require('gulp-karma');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var package = require('./package.json');

var paths = {
    output : 'dist/',
    scripts : {
        input : [ 'src/js/*' ],
        output : 'dist/js/'
    },
    styles : {
        input : 'src/sass/**/*.scss',
        output : 'dist/css/'
    },
    svgs : {
        input : 'src/svg/*.svg',
        output : 'dist/svg/'
    },
    static : 'src/static/**',
    test : {
        spec : [ 'test/spec/**/*.js' ],
        coverage: 'test/coverage/',
        results: 'test/results/'
    }
};

var banner = {
    full :
        '/**\n' +
        ' * <%= package.name %> v<%= package.version %>\n' +
        ' * <%= package.description %>, by <%= package.author.name %>.\n' +
        ' * <%= package.repository.url %>\n' +
        ' * \n' +
        ' * Free to use under the MIT License.\n' +
        ' * http://gomakethings.com/mit/\n' +
        ' */\n\n',
    min :
        '/**' +
        ' <%= package.name %> v<%= package.version %>, by Chris Ferdinandi' +
        ' | <%= package.repository.url %>' +
        ' | Licensed under MIT: http://gomakethings.com/mit/' +
        ' */\n'
};

gulp.task('scripts', ['clean'], function() {
    return gulp.src(paths.scripts.input)
        .pipe(plumber())
        .pipe(flatten())
        .pipe(tap(function (file, t) {
            if ( file.stat.isDirectory() ) {
                var name = file.relative + '.js';
                return gulp.src(file.path + '/*.js')
                    .pipe(concat(name))
                    .pipe(header(banner.full, { package : package }))
                    .pipe(gulp.dest(paths.scripts.output))
                    .pipe(rename({ suffix: '.min.' + Date.now() }))
                    .pipe(uglify())
                    .pipe(header(banner.min, { package : package }))
                    .pipe(gulp.dest(paths.scripts.output));
            }
        }))
        .pipe(header(banner.full, { package : package }))
        .pipe(gulp.dest(paths.scripts.output))
        .pipe(rename({ suffix: '.min.' + Date.now() }))
        .pipe(uglify())
        .pipe(header(banner.min, { package : package }))
        .pipe(gulp.dest(paths.scripts.output));
});

gulp.task('styles', ['clean'], function() {
    return gulp.src(paths.styles.input)
        .pipe(plumber())
        .pipe(sass())
        .pipe(flatten())
        .pipe(prefix('last 2 version', '> 1%'))
        .pipe(header(banner.full, { package : package }))
        .pipe(gulp.dest(paths.styles.output))
        .pipe(rename({ suffix: '.min.' + Date.now() }))
        .pipe(minify())
        .pipe(header(banner.min, { package : package }))
        .pipe(gulp.dest(paths.styles.output));
});

gulp.task('svgs', ['clean'], function () {
  return gulp.src(paths.svgs.input)
        .pipe(svgmin())
        .pipe(svgstore({
            fileName: 'icons.svg',
            prefix: '',
            inlineSvg: false
        }))
        .pipe(gulp.dest(paths.svgs.output));
});

gulp.task('static', ['clean'], function() {
    return gulp.src(paths.static)
        .pipe(plumber())
        .pipe(gulp.dest(paths.output));
});

gulp.task('lint', function () {
    return gulp.src(paths.scripts.input)
        .pipe(plumber())
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('clean', function () {
    return gulp.src([
                paths.output,
                paths.test.coverage,
                paths.test.results
        ], { read: false })
        .pipe(plumber())
        .pipe(clean());
});

gulp.task('test', function() {
    return gulp.src(paths.scripts.input.concat(paths.test.spec))
        .pipe(plumber())
        .pipe(karma({ configFile: 'test/karma.conf.js' }))
        .on('error', function(err) { throw err; });
});

gulp.task('default', [
    'lint',
    'clean',
    'scripts',
    'styles',
    'svgs',
    'static',
    'test'
]);

Gulp Header Bug

Chris,
I have a noticed that the minified CSS file includes both the full and min banners. The problem is this section of the code in the gulp file is not working properly:

.pipe(postcss([
			minify({
				discardComments: {
					removeAll: true
				}
			})
		]))

I ended up using the package gulp-strip-css-comments and replacing the above code with:

var strip = require('gulp-strip-css-comments')

.pipe(strip({ preserve: false }))

Static files not copied

There is no mention of the static directory in the gulp file and the files are not copied

Phantomjs peer dependency

Since the karma-phantomjs-launcher is a plugin for phantomjs you may want to add "phantomjs" as a devDependency. Because of this plugin/peer relationship npm>=3 prints a warning with during "npm install" with

"npm WARN EPEERINVALID [email protected] requires a peer of phantomjs@>=1.9 but none was installed."

This could be confusing for some developers.

Script concatenation question

First off- thank you for releasing this boilerplate, it's fantastic! I have a general question regarding how best to handle the concatenation of scripts w/ dependencies: let's say, for instance, I'm using a library like fullPage.js, and I have a separate script, e.g. init.js with the various initialization settings, and I'd like to ultimately output a single, concatenated js file (starting w/ the lib file, followed by the init) into the dist folder- can I easily configure this sort of thing using your boilerplate? Thanks for any guidance here.

Img directory

Hello,
i have a problem with this directory, in your boilerplate i don't have any img directory, and when i try to create img directory the task delete it.

in DIST i have
- CSS
- JS
- SVG

how can fix this bug?

High vulnerabilities

Hi, after npm install finished downloading dependencies I get:

added 996 packages from 686 contributors and audited 10852 packages in 60.063s
found 145 vulnerabilities (1 low, 3 moderate, 141 high)
  run `npm audit fix` to fix them, or `npm audit` for details

141 high vulnerabilities are a lot, could you solve that?
Thanks

Update Sass task

.pipe(sass({
    style: 'expanded', 
    lineNumbers: true, 
    noCache: true, 
    'sourcemap=none': true
}))
.pipe(flatten())
.pipe(prefix({
    browsers: ['last 2 version', '> 1%'],
    cascade: true,
    remove: true
}))

index.html missing

In the README.md it is listed that there should be an `index.html' in the root of the project, but I don't see it

gulp won't compile

all i've done is clone this repository, run npm install, and tried to compile with gulp. not working, here's what i'm getting:

/Users/jeremy/Desktop/_code/gulp-boilerplate/node_modules/socket.io/lib/store.js:35
Store.prototype.proto = EventEmitter.prototype;
^

TypeError: Cannot read property 'prototype' of undefined
at Object. (/Users/jeremy/Desktop/_code/gulp-boilerplate/node_modules/socket.io/lib/store.js:35:41)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (/Users/jeremy/Desktop/_code/gulp-boilerplate/node_modules/socket.io/lib/manager.js:16:13)
at Module._compile (module.js:571:32)

Browsersync

Would you be open to adding Browsersync to this boilerplate? Thanks in advance.

Add gulp-babel to compile ES6 to ES5 by default

Would you be able to add the gulp-babel plugin so that by default, all JavaScript is compiled from ES6 to ES5 or provide an example of how to do so?

I've tried adding this myself but when running gulp, I just get warnings in the Terminal about using ES6 syntax. The JavaScript compiles but the ES6 syntax is in the distributed file.

Thanks for this great boilerplate!

Updated grid structure

_config.scss

// Grid
$grid-margins: 1.4%;
$grid-sizes: ( // name: width
    1: 16.66666666667%,
    fourth: 25%,
    third: 33.33333333333%,
    2: 33.33333333333%,
    half: 50%,
    3: 50%,
    two-thirds: 66.666666666667%,
    4: 66.666666666667%,
    three-fourths: 75%
);
$grid-breakpoints: ( // breakpoint, prefix, include offsets (boolean)
    ($bp-xsmall, ".row-start-xsmall", false),
    ($bp-small, ".row-start-small", false),
    ($bp-medium, null, true)
)

_grid.scss

/**
 * @section Grid
 * Structure and layout.
 */

/**
 * Base grid styles: single column
 */
.container {
    max-width: $container-max;
    width: $container-width;
    margin-left: auto;
    margin-right: auto;
}

.row {
    margin-left: $grid-margins * -1;
    margin-right: $grid-margins * -1;
}

%grid-base {
    float: left;
    width: 100%;
    padding-left: $grid-margins;
    padding-right: $grid-margins;
}

@each $grid, $width in ($grid-sizes) {
    .grid-#{$grid} {
        @extend %grid-base;
    }
}


/**
 * Reverses order of grid for content choreography
 */
.grid-flip {
    float: right;
}


/**
 * Add columns to grid on bigger screens
 */
@each $breakpoint, $prefix, $offset in ($grid-breakpoints){
    @media (min-width: $breakpoint) {
        @each $grid, $width in ($grid-sizes) {
            #{$prefix} .grid-#{$grid} {
                width: $width;
            }
        }
        @if $offset {
            @each $grid, $width in ($grid-sizes) {
                #{$prefix} .grid-#{$grid} {
                    margin-left: $width;
                }
            }
        }
    }
}

/**
 * Image gallery
 */
.grid-img {
    @media (min-width: $bp-xsmall)  { width: 50%; }
    @media (min-width: $bp-small) { width: 33.33333333333%; }
    @media (min-width: $bp-medium)  { width: 25%; }
}

node-sass fails to install

I tried running npm install on this but it threw out a 404 error message when trying to install node-sass (I assume this is a dependency of some module being used).

A potential fix is found at the below page.

sass/node-sass#2779 (comment)

For anyone who is still having this issue, Node recently moved 12.x to LTS, and it seems like Azure DevOps is now using Node 12.x instead of Node 10.x for builds when the node version isn't specified.

To resolve the issue, I added a Node.js Tool Installer task build step to our build pipeline to specify which version of Node to use for Node commands.

Massive updates

  • Add optimize-js
  • Update all dependencies
  • Update plugin boilerplate
  • Remove unit tests

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.