Skip to content

Commit fcd85e6

Browse files
FerieFerie
committed
gulpfile to compile and run a watch server
1 parent 22beaa1 commit fcd85e6

File tree

1 file changed

+218
-0
lines changed

1 file changed

+218
-0
lines changed

‎gulpfile.js‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
/**
2+
* Gulp
3+
*
4+
* Author: Riccardo Andreatta
5+
*
6+
* Path variables that match the project structure:
7+
*
8+
* 'pathHtml' this is the folder where there are all your HTML files,
9+
* 'pathSass' this is the root folder where there are all your SASS files,
10+
* 'pathJs' this is the root folder where there are all your JavaScript files,
11+
* 'jsLibs' this is the folder where there are all your JavaScripts libraries (they are not linted and concatenated before the other JS files),
12+
* 'distCssPath' this is the folder where you want the built CSS file be put,
13+
* 'distCssFile' and this is the name of the built CSS file,
14+
* 'distJsPath' this is the folder where you want the built JS file be put,
15+
* 'distJsFile' and this is the name of the built JS file.
16+
*
17+
* Note: Running Gulp with the suffix '--type production' it minifies the distCssFile and uglifies the distJsFile
18+
*
19+
*/
20+
21+
'use strict';
22+
23+
/****************************************************/
24+
/* GULP CONFIGURATION */
25+
/****************************************************/
26+
27+
var pathHtml = 'app/',
28+
pathSass = 'assets/sass/',
29+
pathJs = 'app/',
30+
jsLibs = 'assets/js/libs/',
31+
distPath = 'dist/',
32+
distCssPath = 'dist/css/',
33+
distCssFile = 'riccardo.css',
34+
distJsPath = 'dist/js/',
35+
distJsFile = 'riccardo.js';
36+
37+
/****************************************************/
38+
/*** You should leave the remaining part as it is ***/
39+
/****************************************************/
40+
41+
// Require Gulp and other plugins
42+
var gulp = require('gulp'),
43+
gutil = require('gulp-util'),
44+
connect = require('gulp-connect'),
45+
modRewrite = require('connect-modrewrite'),
46+
del = require('del'),
47+
sass = require('gulp-sass'),
48+
csslint = require('gulp-csslint'),
49+
cssmin = require('gulp-cssmin'),
50+
htmlhint = require('gulp-htmlhint'),
51+
sourcemaps = require('gulp-sourcemaps'),
52+
concat = require('gulp-concat'),
53+
jshint = require('gulp-jshint'),
54+
uglify = require('gulp-uglify');
55+
56+
var handleError = function (error) {
57+
gutil.beep();
58+
gutil.log(gutil.colors.red('ERROR: ' + error));
59+
this.emit('end');
60+
};
61+
62+
// Remove all file in distribution folder
63+
gulp.task('clean', function() {
64+
gutil.log('Gulp is deleting the files inside folders:\n', distCssPath, '\n', distJsPath);
65+
return del([distCssPath, distJsPath]);
66+
});
67+
68+
// Validate HTML
69+
gulp.task('html', function() {
70+
gutil.log('Gulp is validating the HTML...');
71+
return gulp.src([
72+
pathHtml + '*.html',
73+
pathHtml + '**/*.html'
74+
])
75+
.pipe(htmlhint({
76+
"alt-require": true,
77+
"attr-unsafe-chars": false,
78+
'doctype-first': false,
79+
"inline-script-disabled": true,
80+
"inline-style-disabled": true,
81+
"spec-char-escape": false,
82+
"tag-pair": false,
83+
"tagname-lowercase": true
84+
}))
85+
.pipe(htmlhint.reporter('htmlhint-stylish'));
86+
});
87+
88+
// Compile Sass & Minify CSS
89+
gulp.task('sass', function() {
90+
gutil.log('Gulp is compiling the SASS');
91+
return gulp.src(pathSass + '*.scss')
92+
.pipe(sourcemaps.init()) // Process the original sources
93+
.pipe(sass())
94+
.on('error', handleError)
95+
.pipe(concat(distCssFile))
96+
.on('error', handleError)
97+
// Only minify if Gulp is ran with '--type production'
98+
.pipe(gutil.env.type === 'production' ? cssmin() : gutil.noop())
99+
.on('error', handleError)
100+
.pipe(sourcemaps.write()) // Add the map to modified source
101+
.pipe(gulp.dest(distCssPath))
102+
.pipe(connect.reload());
103+
});
104+
105+
// Validate CSS
106+
gulp.task('css', ['sass'], function() {
107+
gutil.log('Gulp is validating the CSS...');
108+
return gulp.src([distCssPath + distCssFile])
109+
.pipe(csslint({
110+
'order-alphabetical': false,
111+
'outline-none': false,
112+
'box-sizing': false,
113+
'adjoining-classes': false,
114+
'compatible-vendor-prefixes': true,
115+
'vendor-prefix': true
116+
}))
117+
.pipe(csslint.formatter());
118+
});
119+
120+
// Validate JS
121+
gulp.task('js', function() {
122+
gutil.log('Gulp is validating the JavaScripts...');
123+
return gulp.src([
124+
pathJs + '*.js',
125+
pathJs + '**/*.js',
126+
'!' + jsLibs + '*.*'
127+
])
128+
.pipe(jshint())
129+
.pipe(jshint.reporter('jshint-stylish'));
130+
});
131+
132+
// Concatenate & Minify JS
133+
gulp.task('scripts', ['js'], function() {
134+
gutil.log('Gulp is concatenating the JavaScripts');
135+
return gulp.src([
136+
jsLibs + '*.js',
137+
pathJs + '*.js',
138+
pathJs + '**/*.js'
139+
])
140+
.pipe(sourcemaps.init()) // Process the original sources
141+
.pipe(concat(distJsFile))
142+
.on('error', handleError)
143+
// only uglify if gulp is ran with '--type production'
144+
.pipe(gutil.env.type === 'production' ? uglify({mangle: false}) : gutil.noop())
145+
.on('error', handleError)
146+
.pipe(sourcemaps.write()) // Add the map to modified source
147+
.pipe(gulp.dest(distJsPath))
148+
.pipe(connect.reload());
149+
});
150+
151+
// Lint Task
152+
gulp.task('lint', ['html', 'css', 'js'], function() {
153+
return;
154+
});
155+
156+
// Server Task with Livereload
157+
gulp.task('server', ['watch'], function () {
158+
connect.server({
159+
root: __dirname,
160+
livereload: true,
161+
// livereload.port: 35729,
162+
fallback: 'app/index.html',
163+
port: process.env.PORT || 9050,
164+
host: 'localhost',
165+
middleware: function () {
166+
return [
167+
modRewrite([
168+
'^/api/(.*)$ http://localhost:9050/api/v1/$1 [P]'
169+
])
170+
];
171+
}
172+
});
173+
});
174+
175+
// Watch Task
176+
gulp.task('watch', ['sass', 'scripts'], function() {
177+
gulp.watch([
178+
pathHtml + '*.html',
179+
pathHtml + '**/*.html'],
180+
['html'])
181+
.on('change', function(event) {
182+
gutil.log('File ' + event.path + ' was ' + event.type);
183+
gutil.log('===============');
184+
gutil.log('| Building... |');
185+
gutil.log('===============');
186+
});
187+
gulp.watch([
188+
pathJs + '*.js',
189+
pathJs + '**/*.js'],
190+
['scripts'])
191+
.on('change', function(event) {
192+
gutil.log('File ' + event.path + ' was ' + event.type);
193+
gutil.log('===============');
194+
gutil.log('| Building... |');
195+
gutil.log('===============');
196+
});
197+
gulp.watch([
198+
pathSass + '*.*',
199+
pathSass + '**/*.*'],
200+
['sass'])
201+
.on('change', function(event) {
202+
gutil.log('File ' + event.path + ' was ' + event.type);
203+
gutil.log('===============');
204+
gutil.log('| Building... |');
205+
gutil.log('===============');
206+
});
207+
gutil.log('===========================');
208+
gutil.log('| Gulp is now watching... |');
209+
gutil.log('===========================');
210+
});
211+
212+
// Default Task
213+
gulp.task('default', ['clean'], function() {
214+
gutil.log('===========================');
215+
gutil.log('| Gulp is now building... |');
216+
gutil.log('===========================');
217+
gulp.start('html', 'sass', 'scripts');
218+
});

0 commit comments

Comments
 (0)