autofront 1.4.2 → 1.5.1

package/README.md

@@ -8,7 +8,7 @@ Gulp settings for projects.
 - With `gulp serve:dist`, the server is production, but without the reload.
 - `gulp build` builds the distributable version.
 
-Additionally, a parameter can be included (e.g.: `gulp serve --dev` o `gulp build --pro`) to indicate the connection server. Defaults to local. And these domain URLs must to appear listed in `package.json` with the property `domains` (optionally also `domainsAliases`).
+Additionally, a parameter can be included (e.g.: `gulp --dev` o `gulp build --pro`) to indicate the connection server. Defaults to local. And these domain URLs must to appear listed in `package.json` with the property `domains` (optionally also `domainsAliases`).
 
 ## Folder structure
 
@@ -20,7 +20,8 @@ Here is the essential basic organization you must to put in your project:
 ├─ src/
 │  ├─ fonts/
 │  ├─ styles/
-│  │  └─ index.less
+│  │  ├─ index.less
+│  │  └─ index.scss
 │  └─ index.html
 ├─ .gitignore
 ├─ bower.json

package/index.js

@@ -1,5 +1,6 @@
 const gulp = require('gulp'),
 	args = require('get-gulp-args')(),
+	mergeStream = require('merge-stream'),
 	mainBowerFiles = require('main-bower-files'),
 	$ = require('gulp-load-plugins')(),
 	injStr = $.injectString,
@@ -12,7 +13,8 @@ var domain = undefined;
 const allFiles = getFiles(),
 	indexHtmlFile = 'index.html',
 	stylesFolder = 'styles/',
-	cssFilename = stylesFolder+'index',
+	cssFilename = 'index',
+	cssFullFilename = cssFilename+'.css',
 	jsTemplatesFile = 'scripts/templates.js';
 
 const paths = {
@@ -21,9 +23,10 @@ const paths = {
 	dist: 'dist/'
 };
 paths.srcIndexHtml = paths.src+indexHtmlFile;
+paths.srcSass = paths.src+getFiles('scss');
 paths.srcLess = paths.src+getFiles('less');
 paths.srcJs = paths.src+getFiles('js');
-paths.srcOthers = [paths.src+allFiles, '!'+paths.srcIndexHtml, '!'+paths.srcLess, '!'+paths.srcJs];
+paths.srcOthers = [paths.src+allFiles, '!'+paths.srcIndexHtml, '!'+paths.srcSass, '!'+paths.srcLess, '!'+paths.srcJs];
 
 const nl = '\n',
 	tab = '	';
@@ -43,13 +46,22 @@ gulp.task('check', () => {
 });
 
 gulp.task('del', () => delFolder(paths.tmp));
-gulp.task('index-build', () => gulp.src(paths.srcIndexHtml).pipe(injStr.after('<!-- endbuild -->', nl+tab+'<link rel="stylesheet" href="'+cssFilename+'.css">')).pipe($.inject(gulp.src(paths.srcJs).pipe($.angularFilesort()), {relative: true})).on('error', notifyError).pipe($.wiredep()).pipe($.useref()).pipe(gulp.dest(paths.tmp)));
+gulp.task('index-build', () => gulp.src(paths.srcIndexHtml).pipe(injStr.after('<!-- endbuild -->', nl+tab+'<link rel="stylesheet" href="'+stylesFolder+cssFullFilename+'">')).pipe($.inject(gulp.src(paths.srcJs).pipe($.angularFilesort()), {relative: true})).on('error', notifyError).pipe($.wiredep()).pipe($.useref()).pipe(gulp.dest(paths.tmp)));
 gulp.task('index-domain', () => gulp.src(paths.tmp+getFiles('js')).pipe(injStr.replace('{{AUTOFRONT_DOMAIN}}', domain)).pipe(gulp.dest(paths.tmp)));
 gulp.task('index', gulpSync.sync([
 	'index-build',
 	'index-domain'
 ]));
-gulp.task('styles', () => gulp.src(paths.src+cssFilename+'.less').pipe(injStr.prepend('// bower:less'+nl+'// endbower'+nl)).pipe($.wiredep()).pipe($.less()).on('error', notifyError).pipe(gulp.dest(paths.tmp+stylesFolder)));
+gulp.task('styles', () => {
+	return mergeStream(getCssStream('scss', $.sass), getCssStream('less', $.less))
+		.pipe($.concat(cssFullFilename))
+		.pipe(gulp.dest(paths.tmp+stylesFolder));
+
+	function getCssStream(ext, process) {
+		return gulp.src(paths.src+stylesFolder+cssFilename+'.'+ext).pipe(injStr.prepend('// bower:'+ext+nl+'// endbower'+nl)).pipe($.wiredep()).pipe(process()).on('error', notifyError);
+	}
+});
+
 gulp.task('fonts', () => gulp.src(mainBowerFiles()).pipe(filter(['eot','otf','svg','ttf','woff','woff2'], true)).pipe(gulp.dest(paths.tmp+'fonts/')));
 gulp.task('others', () => {
 	const pugFilter = filter('pug');
@@ -66,7 +78,7 @@ gulp.task('build:tmp', gulpSync.sync([
 gulp.task('browser', ['build:tmp'], () => browserSyncInit(paths.tmp));
 gulp.task('serve', ['browser'], () => {
 	gulp.watch([paths.srcIndexHtml, paths.srcJs], ['index']);
-	gulp.watch(paths.srcLess, ['styles']);
+	gulp.watch([paths.srcSass, paths.srcLess], ['styles']);
 	gulp.watch(paths.srcOthers, ['others']);
 	gulp.watch(paths.tmp+allFiles, function(event) {
 		browserSync.reload(event.path);
@@ -95,7 +107,7 @@ gulp.task('build', gulpSync.sync([
 	return gulp.src(paths.dist+allFiles)
 		.pipe(indexHtmlFilter).pipe(injStr.before('</body>', '<script src="'+jsTemplatesFile+'"></script>'+nl)).pipe(minifyHtml()).pipe(indexHtmlFilter.restore)
 		.pipe(cssFilter).pipe($.cssnano({zindex: false})).pipe(cssFilter.restore)
-		.pipe(jsFilter).pipe($.ngAnnotate()).pipe($.uglify()).pipe(jsFilter.restore)
+		.pipe(jsFilter).pipe($.ngAnnotate()).pipe($.terser()).pipe(jsFilter.restore)
 		.pipe(cssAndJsFilter).pipe($.rev()).pipe($.revDeleteOriginal()).pipe(cssAndJsFilter.restore)
 		.pipe($.revReplace())
 		.pipe(imgFilter).pipe($.imagemin()).pipe(imgFilter.restore)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autofront",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "Gulp settings for projects.",
   "main": "index.js",
   "scripts": {
@@ -29,6 +29,7 @@
     "gulp-angular-templatecache": "^2.2.3",
     "gulp-clean": "^0.4.0",
     "gulp-clean-dest": "^0.2.0",
+    "gulp-concat": "^2.6.1",
     "gulp-cssnano": "^2.1.3",
     "gulp-filter": "^5.1.0",
     "gulp-htmlmin": "^4.0.0",
@@ -44,11 +45,13 @@
     "gulp-rev": "^8.1.1",
     "gulp-rev-delete-original": "^0.2.3",
     "gulp-rev-replace": "^0.4.4",
+    "gulp-sass": "^4.0.2",
     "gulp-size": "^3.0.0",
     "gulp-sync": "^0.1.4",
-    "gulp-uglify": "^3.0.1",
+    "gulp-terser": "^1.1.7",
     "gulp-useref": "^3.1.6",
     "gulp-wiredep": "^1.2.0",
-    "main-bower-files": "^2.13.1"
+    "main-bower-files": "^2.13.1",
+    "merge-stream": "^1.0.1"
   }
 }