-
Notifications
You must be signed in to change notification settings - Fork 4
/
gulpfile.js
71 lines (59 loc) · 2.18 KB
/
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var gulp = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
minify = require('gulp-minify'),
cleanCss = require('gulp-clean-css'),
rev = require('gulp-rev'),
del = require('del'),
browserSync = require('browser-sync').create();
var sassInput = './src/cwg-scss/cwg-styles.scss';
var sassOutput = './src/cwg-scss/';
var distCssFolder = './dist/build/css';
var distCssFiles = './dist/build/css/*.css';
var sassWatchPath = './src/cwg-scss/**/*.scss';
gulp.task('clean-css', function () {
return del([
distCssFiles
]);
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './dist/'
},
})
})
gulp.task('sass', ['clean-css'], function() {
return gulp
// Find all `.scss` files from the `cwg-scss` folder
.src(sassInput)
// Adds a sourcemap to the actual .scss file, instead of the compiled .css file
.pipe(sourcemaps.init())
// Run Sass on those files
.pipe(sass().on('error', sass.logError)) // Error log to keep session going when scss contains error)
// Write those sourcemaps
.pipe(sourcemaps.write())
// Auto prefix the CSS, and here are the 8 options: https://github.com/postcss/autoprefixer#options
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
// Minifies css
.pipe(cleanCss())
// CSS for distribution
.pipe(gulp.dest(distCssFolder))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('watch', ['browserSync', 'sass'], function() {
gulp.watch(sassWatchPath, ['sass']); // Watch and run sass on changes
gulp.watch(sassWatchPath).on('change', browserSync.reload);
gulp.watch("./dist/*.html").on('change', browserSync.reload);
gulp.watch("assets/img/**", ['imagemin', 'svgmin']); // Watch and minify images on changes
});
gulp.task('default', ['watch']);
gulp.task('dist', ['watch', 'sass-dist']);
// Notes
// Used this guide to minimize css and js » https://www.toptal.com/javascript/optimize-js-and-css-with-gulp