-
Notifications
You must be signed in to change notification settings - Fork 1
/
gulpfile.js
98 lines (82 loc) · 2.62 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/**
Configuration.
Project Configuration for gulp tasks.
*/
const path = require("path");
const sassFiles = "src/scss/**/*.scss";
const styleDestination = "dist/style";
/**
Load Plugins.
Load gulp plugins and assing them semantic names.
*/
const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const gutil = require("gulp-util");
const chalk = require("chalk");
const { gulpSassError } = require("gulp-sass-error");
// CSS related plugins.
var sass = require("gulp-sass"); // Gulp pluign for Sass compilation
var autoprefixer = require("gulp-autoprefixer"); // Autoprefixing magic
var minifycss = require("gulp-uglifycss"); // Minifies CSS files
// JS related plugins.
var concat = require("gulp-concat"); // Concatenates JS files
var uglify = require("gulp-uglify"); // Minifies JS files
// Utility related plugins.
var rename = require("gulp-rename"); // Renames files E.g. style.css -> style.min.css
var sourcemaps = require("gulp-sourcemaps"); // Maps code in a compressed file (E.g. style.css) back to it’s original position in a source file (E.g. structure.scss, which was later combined with other css files to generate style.css)
var notify = require("gulp-notify"); // Sends message notification to you
/**
Task: styles
Compiles Sass, Autoprefixes it and Minifies CSS
*/
gulp.task("styles", function() {
gulp
.src(sassFiles)
.pipe(sourcemaps.init())
.pipe(
sass({
errLogToConsole: true,
outputStyle: "compressed", // compressed || nested || expanded
precision: 10
}).on("error", sass.logError)
)
.pipe(sourcemaps.write({ includeContent: true }))
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(
autoprefixer(
"last 2 version",
"> 1%",
"safari 5",
"ie 8",
"ie 9",
"opera 12.1",
"ios 6",
"android 4"
)
)
.pipe(sourcemaps.write(styleDestination))
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest(styleDestination))
.pipe(notify({ message: "TASK Completed!", onLast: true }));
});
/**
Task: browser-sync
Refreshes the browser for you
*/
gulp.task("browser-sync", function() {
const files = ["**/*.php", "**/*.html"];
browserSync.init(files, {
server: "./",
port: 3000
});
});
gulp.task("watch", function() {
// gulp.watch("./dist/styles/*.css", ["styles"]);
gulp.watch("./src/scss/**/*.scss", ["styles"]);
gulp.watch("./dist/style/*.css").on("change", browserSync.reload);
});
/**
Task: styles
Compiles Sass, Autoprefixes it and Minifies CSS
*/
gulp.task("default", ["styles", "browser-sync", "watch"]);