design-template/gulpfile.js at master · beardedbrew/design-template · GitHub

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
var gulp = require('gulp'),
	gutil = require('gulp-util'),
	sass = require('gulp-sass'),
	prefix = require('gulp-autoprefixer'),
	rename = require('gulp-rename'),
	connect = require('gulp-connect'),
	minifycss = require('gulp-minify-css'),
	browserSync = require("browser-sync"),
	reload = browserSync.reload,
	react = require('gulp-react'),
	cjsx = require('gulp-cjsx'),
	coffee = require('gulp-coffee'),
	sourcemaps = require('gulp-sourcemaps')
	jsonServer = require('json-server');

var paths = {
    styles: {
		src: './src/stylesheets/sass',
		files: './src/stylesheets/sass/**/*.scss',
		dest: './src/stylesheets/css'
	},
	react: {
		src: './src/react',
		jsx_files: './src/react/*.jsx',
		cjsx_files: './src/react/*.cjsx',
		dest: './src/build'
	},
	coffee: {
		files: './src/scripts/app.coffee',
		dest: './src/scripts'
	},
	json: {
		backend: './backend.json'
	}
};

var displayError = function(error) {
    var errorString = '[' + error.plugin + ']';
	errorString += ' ' + error.message.replace("\n",'');
	if(error.fileName)
		errorString += ' in ' + error.fileName;
	if(error.lineNumber)
		errorString += ' on line ' + error.lineNumber;
	console.error(errorString);
};

function logger(evt) {
	console.log(
		'[watcher] File ' + evt.path.replace(/.*(?=sass)/,'') + ' was ' + evt.type + ', compiling...'
	);
}

gulp.task('static', function() {
  browserSync({
    open: true,
    port: 1338,
    server: {
      baseDir: "./"
    },
    notify: {
      styles: ['opacity: 0', 'position: absolute']
    }
  });
});

gulp.task('sass', function (){
	gulp.src(paths.styles.files)
		.pipe(sass({
			outputStyle: 'expanded',
			sourceComments: 'map',
			includePaths : [paths.styles.src],
			errLogToConsole: true
		}))
		.pipe(prefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
		.pipe(gulp.dest(paths.styles.dest))
		.pipe(reload({stream: true}));
});

// gulp.task('sass-min', function (){
// 	gulp.src(paths.styles.files)
// 		.pipe(sass({
// 			outputStyle: 'compressed',
// 			sourceComments: 'map',
// 			includePaths : [paths.styles.src],
// 			errLogToConsole: true
// 		}))
// 		.pipe(prefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
// 		.pipe(rename({suffix: '.min'}))
// 		.pipe(minifycss())
// 		.pipe(gulp.dest(paths.styles.dest));
// });

gulp.task('html', function() {
	gulp.watch('./index.html', function() {
		reload();
	});
});

gulp.task('coffee', function() {
	gulp.src(paths.coffee.files)
	.pipe(sourcemaps.init())
	.pipe(coffee({bare: true}).on('error', gutil.log))
	.pipe(sourcemaps.write())
	.pipe(gulp.dest(paths.coffee.dest));
});

gulp.task('react', function() {
	gulp.src(paths.react.jsx_files)
	.pipe(react().on('error', gutil.log))
	.pipe(gulp.dest(paths.react.dest));

	gulp.src(paths.react.cjsx_files)
	.pipe(cjsx({bare: true}).on('error', gutil.log))
	.pipe(gulp.dest(paths.react.dest));
});


gulp.task('watcher', function() {

	// gulp.watch(paths.styles.files, ['sass', 'sass-min'])
	// .on('change', logger);

	gulp.watch(paths.styles.files, ['sass'])
	.on('change', logger);

	gulp.watch([paths.react.jsx_files, paths.react.cjsx_files], ['react', reload])
	.on('change', logger);

	gulp.watch(paths.coffee.files, ['coffee']);
});

gulp.task('backend', function () {
	var server = jsonServer.create();
	server.use(jsonServer.defaults);
	server.use(jsonServer.router('backend.json'));
	server.listen(3000);
	gutil.log(gutil.colors.magenta('JSON-Server listening on port 3000..!'));
});

// gulp.task('default', ['sass','sass-min','webserver', 'react', 'watcher']);
gulp.task('default', ['sass', 'react', 'coffee', 'html', 'static', 'backend','watcher']);