-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
218 lines (202 loc) · 8.14 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
var gulp = require('gulp');//main
var filter = require('gulp-filter');//filters files with globs
var pump = require('pump');//used only on uglify
var sass = require('gulp-sass');//using
var autoprefixer = require('gulp-autoprefixer');//using
var pug = require('gulp-pug');//using
var pugInheritance = require('gulp-pug-inheritance');//compile only changed files
var sourcemaps = require('gulp-sourcemaps');//using
var requirejsOptimize = require('gulp-requirejs-optimize');//using;optimizes modules individually & bundle (minify)
var path = require("path");//using for callback for pug task
var browserSync = require('browser-sync').create();
//build packages
var useref = require('gulp-useref');//https://www.npmjs.com/package/gulp-useref
var uglify = require('gulp-uglify');//used only as needed for dist js vendor files; https://www.npmjs.com/package/gulp-uglify
var gulpIf = require('gulp-if');//https://github.com/robrich/gulp-if
var cssnano = require('gulp-cssnano');//https://www.npmjs.com/package/gulp-cssnano
var imagemin = require('gulp-imagemin');//https://www.npmjs.com/package/gulp-imagemin
var cache = require('gulp-cache');//to help speed up image optimization; https://www.npmjs.com/package/gulp-cache
//cleaning
var del = require('del');//delete files/directories w/globs; https://www.npmjs.com/package/del
//build
var runSequence = require('run-sequence');//run tasks in order; https://www.npmjs.com/package/run-sequence
var paths = {
sass: ['./src/sass/**/*.sass'],
//sass: ['./src/sass/main.sass'],
pugPartials: ['./src//pug/**/*.pug'],
pugMain: ['./src/pug/*.pug'],
//pug: ['./src/pug/**/!(_)*.pug'],//takes all files in all directories; exclude by !(_)*.pug if not using gulp-filter; does not work with watch
require: ['./src/js/**/*.js'],
html: ['./dist/*.html'],
css: ['./dist/**/*.css'],
js: ['./dist/js/*.js']
};
//$ gulp sass works
gulp.task('sass', function () {
//return gulp.src('./sass/**/*.scss')
return gulp.src(paths.sass)
//sourcemaps works
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())//add prefixes to css for browser not supporting new features; see http://shouldiprefix.com/
.pipe(sourcemaps.write('../sourcemaps'))//writes sourcemaps to directory:relative to dest!!
.pipe(gulp.dest('./dist/css'));//relative to gulpfile
});
//$ gulp pug works
gulp.task('pug', function(done) {
//gulp.src('./pug/**/*.pug')
return gulp.src(paths.pugMain)
//return gulp.src(paths.pug)//used when gulp.dest w/o callback is used; comment .on();
//filter out partials (folders and files starting with "_" )
//.pipe(filter(function (file) {
//return !/\/_/.test(file.path) && !/^_/.test(file.relative);//only works on OSX?? but needs to remove !(_) from paths.pug
//}))
.pipe(pug({
//pug options as objects
pretty: ['true'],//beautifies compiled *.html
}))
//.pipe(pugInheritance({basedir: './src/pug/', skip: 'node_modules'}))
.pipe(gulp.dest('./dist/'));//used with return gulp.src
//.pipe(gulp.dest(callback))//remove return from gulp.src() to avoid returning stream and confusing gulp
//.on('end', done);
});
gulp.task('requireopt', function () {
/*return gulp.src('./src/modules/*.js')
.pipe(requirejsOptimize())
.pipe(gulp.dest('./dist2'));*/
return gulp.src('./src/js/require.config.js')//relative to gulpfile
.pipe(sourcemaps.init())//pipes inside here will contain sourcemps; comment to remove
.pipe(requirejsOptimize(function(file) {
return {
baseUrl: "./src/js/lib",//relative to gulpfile
//mainConfigFile is relative to gulpfile; used to tell optimizer to read the main.js file
//used for requirejs module loading; needed for shim see:http://www.requirejs.org/docs/optimization.html#mainConfigFile
mainConfigFile: './src/js/require.config.js',//relative to gulpfile
paths: {
modernizr_script: 'modules/modernizr_scripts',
two_module: 'modules/two_module',
one_module: 'modules/one_module'
},
include: ['../require.config'],//relative to baseUrl
name: "../../../bower_components/almond/almond",//relative to baseURL
out: "build.js"//relative to gulpfile.js or gulp.dest()
};
}))
.pipe(sourcemaps.write('../sourcemaps'))//writes sourcemaps to directory:relative to gulp.dest()!!; comment to remove
.pipe(gulp.dest('./dist/js'));//output directory
});
//$ gulp watch works
gulp.task('watch', ['sass', 'pug', 'requireopt'], function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.pugPartials, ['pug']);
gulp.watch(paths.pugMain, ['pug']);
gulp.watch(paths.require, ['requireopt']);
});
gulp.task('watchsass', ['sass'], function() {
gulp.watch(paths.sass, ['sass']);
});
//only pug watch
gulp.task('watchpug', ['pug'], function() {
gulp.watch(paths.pug, ['pug']);
});
//js watch
gulp.task('watchjs', ['requireopt'], function() {
gulp.watch(paths.require, ['requireopt']);
});
//not used unless folders are desired for compiled *.html files
/*function callback(file) {//not being used!!
if (file.path.search('index') !== -1) {//if path is index then return to directory
//return './www/app/';
return './dist/templates/';//excluded index.html goes here
}
var folder = path.basename(file.path).replace(/\..*html/, '/');
//return './www/app/' + folder;
return './dist/templates/' + folder;//used to organize compiled *.html into folders
}*/
//copy global files to dist
gulp.task('css-files', function() {
gulp.src('./src/css/*.css')
.pipe(gulp.dest('./dist/css'));
});
gulp.task('js-files', function() {
gulp.src(['./src/js/*.js', '!./src/js/require.config.js'])
.pipe(gulp.dest('./dist/js'));
});
gulp.task('img-files', function() {
gulp.src('./src/images/**/*.+(png|jpg|gif|svg)')
.pipe(gulp.dest('./dist/images'));
});
gulp.task('copy-all', function (callback) {
runSequence(
'css-files',
'js-files',
'img-files',
callback
)
})
// Static server
gulp.task('browser-sync', function() {
browserSync.init({
//browser: ["chrome", "firefox", "microsoft edge"],
browser: ["chrome"],
server: {
baseDir: "./dist/"
}
});
});
//tasks for optimization/production
//based on https://css-tricks.com/gulp-for-beginners/
//useref for concatenating js/css files from different directories
gulp.task('useref', function(){
return gulp.src('dist/index.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('public'))
});
//optimize images w/options for each type plus cache to speed up process
gulp.task('images', function(){
return gulp.src('dist/images/**/*.+(png|jpg|gif|svg)')
.pipe(cache(imagemin()))
.pipe(gulp.dest('public/images'))
});
//clear cache
gulp.task('cache:clear', function (done) {
return cache.clearAll(done)
})
//clean: delete directory when not in use
gulp.task('clean:dist', function() {
return del.sync('dist');
})
gulp.task('clean:public', function() {
return del.sync('public');
})
//===Build tasks
//$ gulp ; creates dist folder with all files + global copies
gulp.task('default', ['sass', 'pug', 'requireopt', 'copy-all']);
//Run server to auto update browser upon file changes
// Static server for changes to dist, copies global files & reloads browser when compiled files are changed
gulp.task('serve', ['browser-sync', 'css-files', 'js-files', 'img-files'], function() {
gulp.watch(paths.sass, ['sass']);//sass not compiling and browser not reloading
gulp.watch(paths.pugPartials, ['pug']);
gulp.watch(paths.pugMain, ['pug']);
gulp.watch(paths.require, ['requireopt']);
gulp.watch(paths.html, browserSync.reload);
gulp.watch(paths.css, browserSync.reload);
gulp.watch(paths.js, browserSync.reload);
});
//build public folder
gulp.task('public', ['useref', 'images']);
//clean by deleting dist, public and clearing cache
gulp.task('clean-all', ['cache:clear', 'clean:dist', 'clean:public']);
//builds for production the public folder
gulp.task('build', function (callback) {
runSequence(
['clean:dist', 'clean:public'],
'default',
'public',
callback
)
})