├── .gitignore ├── LICENSE ├── gulpfile.js ├── images └── palm.jpeg ├── index.html ├── js ├── min │ └── scripts.min.js └── scripts.js ├── package.json ├── readme.md └── sass └── main.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | .DS_Store 4 | css -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Joe Richardson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*============================================= 2 | = Gulp Starter by @dope = 3 | =============================================*/ 4 | 5 | /** 6 | * 7 | * The packages we are using 8 | * Not using gulp-load-plugins as it is nice to see whats here. 9 | * 10 | **/ 11 | var gulp = require('gulp'); 12 | var sass = require('gulp-sass'); 13 | var browserSync = require('browser-sync'); 14 | var prefix = require('gulp-autoprefixer'); 15 | var plumber = require('gulp-plumber'); 16 | var uglify = require('gulp-uglify'); 17 | var rename = require("gulp-rename"); 18 | var imagemin = require("gulp-imagemin"); 19 | var pngquant = require('imagemin-pngquant'); 20 | 21 | /** 22 | * 23 | * Styles 24 | * - Compile 25 | * - Compress/Minify 26 | * - Catch errors (gulp-plumber) 27 | * - Autoprefixer 28 | * 29 | **/ 30 | gulp.task('sass', function() { 31 | gulp.src('sass/**/*.scss') 32 | .pipe(sass({outputStyle: 'compressed'})) 33 | .pipe(prefix('last 2 versions', '> 1%', 'ie 8', 'Android 2', 'Firefox ESR')) 34 | .pipe(plumber()) 35 | .pipe(gulp.dest('css')); 36 | }); 37 | 38 | /** 39 | * 40 | * BrowserSync.io 41 | * - Watch CSS, JS & HTML for changes 42 | * - View project at: localhost:3000 43 | * 44 | **/ 45 | gulp.task('browser-sync', function() { 46 | browserSync.init(['css/*.css', 'js/**/*.js', 'index.html'], { 47 | server: { 48 | baseDir: './' 49 | } 50 | }); 51 | }); 52 | 53 | 54 | /** 55 | * 56 | * Javascript 57 | * - Uglify 58 | * 59 | **/ 60 | gulp.task('scripts', function() { 61 | gulp.src('js/*.js') 62 | .pipe(uglify()) 63 | .pipe(rename({ 64 | dirname: "min", 65 | suffix: ".min", 66 | })) 67 | .pipe(gulp.dest('js')) 68 | }); 69 | 70 | /** 71 | * 72 | * Images 73 | * - Compress them! 74 | * 75 | **/ 76 | gulp.task('images', function () { 77 | return gulp.src('images/*') 78 | .pipe(imagemin({ 79 | progressive: true, 80 | svgoPlugins: [{removeViewBox: false}], 81 | use: [pngquant()] 82 | })) 83 | .pipe(gulp.dest('images')); 84 | }); 85 | 86 | 87 | /** 88 | * 89 | * Default task 90 | * - Runs sass, browser-sync, scripts and image tasks 91 | * - Watchs for file changes for images, scripts and sass/css 92 | * 93 | **/ 94 | gulp.task('default', ['sass', 'browser-sync', 'scripts', 'images'], function () { 95 | gulp.watch('sass/**/*.scss', ['sass']); 96 | gulp.watch('js/**/*.js', ['scripts']); 97 | gulp.watch('images/*', ['images']); 98 | }); 99 | -------------------------------------------------------------------------------- /images/palm.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dope/gulp-starter/c4e99afe193fdbb1cea2d80d1ac5b903283c01f1/images/palm.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gulp Starter 6 | 7 | 8 | 9 | 10 |

Gulp Starter

11 |

Check out the gulpfile.js

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /js/min/scripts.min.js: -------------------------------------------------------------------------------- 1 | console.log("Hello World"); -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | console.log('Hello World') -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-starter", 3 | "version": "1.0.0", 4 | "description": "starter kit for gulp", 5 | "main": "index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "http://github.com/dope/gulp-starter.git" 12 | }, 13 | "keywords": [ 14 | "gulp", 15 | "scss", 16 | "js", 17 | "images" 18 | ], 19 | "author": "Joe Richardson", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/dope/gulp-starter/issues" 23 | }, 24 | "homepage": "https://github.com/dope/gulp-starter", 25 | "devDependencies": { 26 | "browser-sync": "^2.0.0", 27 | "gulp": "^3.8.8", 28 | "gulp-autoprefixer": "^1.0.1", 29 | "gulp-imagemin": "^2.2.1", 30 | "gulp-plumber": "^0.6.6", 31 | "gulp-rename": "^1.2.0", 32 | "gulp-sass": "^2.0.4", 33 | "gulp-uglify": "^1.1.0", 34 | "imagemin-pngquant": "^4.0.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Gulp Starter 2 | A starter kit for your front-end builds. 3 | 4 | - Compiles, autoprefixes and minimizes your Scss (can easily switch to Sass or LESS) 5 | - Uglifys your JS 6 | - Compresses your Images 7 | - Generates a BrowserSync URL for you to access. 8 | 9 | ### Getting Started 10 | Clone: `http://github.com/dope/gulp-starter.git` 11 | 12 | Once you have cloned the repo, navigate in to the directory via terminal and run. 13 | 14 | ```bash 15 | npm install 16 | gulp 17 | ``` 18 | -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: salmon; 3 | } 4 | --------------------------------------------------------------------------------