├── README.md
├── gulpfile.js
├── package.json
└── src
├── about.html
├── images
└── gulp.png
├── index.html
├── js
├── file1.js
└── file2.js
└── sass
└── style.scss
/README.md:
--------------------------------------------------------------------------------
1 | # Gulp Example/Starter App
2 |
3 | Example gulp application to show how to use plugins and run tasks
4 |
5 | ### Version
6 | 1.0.0
7 |
8 | ##Dependencies
9 | gulp-imagemin
10 | gulp-concat
11 | gulp-uglify
12 | gulp-sass
13 |
14 | ## Install Dependencies
15 | ```bash
16 | npm install
17 | ```
18 |
19 | ## Run all tasks
20 | ```bash
21 | gulp
22 | ```
23 |
24 | ## Watch all tasks/files
25 | ```bash
26 | gulp watch
27 | ```
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const imagemin = require('gulp-imagemin');
3 | const uglify = require('gulp-uglify');
4 | const sass = require('gulp-sass');
5 | const concat = require('gulp-concat');
6 |
7 | /*
8 | -- TOP LEVEL FUNCTIONS
9 | gulp.task - Define tasks
10 | gulp.src - Point to files to use
11 | gulp.dest - Points to folder to output
12 | gulp.watch - Watch files and folders for changes
13 | */
14 |
15 | // Logs Message
16 | gulp.task('message', function(){
17 | return console.log('Gulp is running...');
18 | });
19 |
20 | // Copy All HTML files
21 | gulp.task('copyHtml', function(){
22 | gulp.src('src/*.html')
23 | .pipe(gulp.dest('dist'));
24 | });
25 |
26 | // Optimize Images
27 | gulp.task('imageMin', () =>
28 | gulp.src('src/images/*')
29 | .pipe(imagemin())
30 | .pipe(gulp.dest('dist/images'))
31 | );
32 |
33 | // Minify JS
34 | gulp.task('minify', function(){
35 | gulp.src('src/js/*.js')
36 | .pipe(uglify())
37 | .pipe(gulp.dest('dist/js'));
38 | });
39 |
40 | // Compile Sass
41 | gulp.task('sass', function(){
42 | gulp.src('src/sass/*.scss')
43 | .pipe(sass().on('error', sass.logError))
44 | .pipe(gulp.dest('dist/css'));
45 | });
46 |
47 | // Scripts
48 | gulp.task('scripts', function(){
49 | gulp.src('src/js/*.js')
50 | .pipe(concat('main.js'))
51 | .pipe(uglify())
52 | .pipe(gulp.dest('dist/js'));
53 | });
54 |
55 | gulp.task('default', ['message', 'copyHtml', 'imageMin', 'sass', 'scripts']);
56 |
57 | gulp.task('watch', function(){
58 | gulp.watch('src/js/*.js', ['scripts']);
59 | gulp.watch('src/images/*', ['imageMin']);
60 | gulp.watch('src/sass/*.scss', ['sass']);
61 | gulp.watch('src/*.html', ['copyHtml']);
62 | });
63 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gulpexapp",
3 | "version": "1.0.0",
4 | "description": "Example app using Gulp",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "gulp": "^3.9.1",
13 | "gulp-concat": "^2.6.1",
14 | "gulp-imagemin": "^3.2.0",
15 | "gulp-sass": "^3.1.0",
16 | "gulp-uglify": "^2.1.2"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | My Example App
6 |
7 |
8 |
9 | About Us
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/images/gulp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/gulpexapp/2dc32861f29185a1f4514c9e12dbbf70008c0926/src/images/gulp.png
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | My Example App
6 |
7 |
8 |
9 | My Awesome App
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/js/file1.js:
--------------------------------------------------------------------------------
1 | // Console Log 1
2 | console.log('This is file One');
3 |
4 |
5 |
6 | // Console Log 2
7 | console.log('This is file 2');
8 |
--------------------------------------------------------------------------------
/src/js/file2.js:
--------------------------------------------------------------------------------
1 | // Console Log
2 |
3 | console.log('This is file 2');
4 |
5 | // Alert
6 |
7 | alert('This is file 2');
8 |
--------------------------------------------------------------------------------
/src/sass/style.scss:
--------------------------------------------------------------------------------
1 | $bgColor: #cccccc;
2 |
3 | body{
4 | background:$bgColor;
5 | }
6 |
--------------------------------------------------------------------------------