Gulp setup sass and autoprefixer (#358)

- Install using yarn
- #355 Using SASS instead of CSS for development
- #357 Setup autoprefixer in Gulpfile
- Change gulp-minify-css to gulp-clean-css because deprecated
- Add browsersync for hot reload development
- Change link css and js in demo for hot reload

Author: mazipan

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 bower_components/
 *.log
+package-lock.json

gulpfile.js

@@ -6,9 +6,12 @@
         del = require('del'),
         beautify = require("gulp-jsbeautifier"),
         uglify = require("gulp-uglify"),
-        minifyCSS = require("gulp-minify-css"),
+        cleanCSS = require('gulp-clean-css'),
         rename = require("gulp-rename"),
-        header = require('gulp-header');
+        header = require('gulp-header'),
+        sass = require('gulp-sass'),
+        autoprefixer = require('gulp-autoprefixer'),
+        browserSync = require('browser-sync').create();
 
     var pkg = require('./package.json');
     var banner = ['/**',
@@ -27,11 +30,20 @@
 
     gulp.task('dist:clean', function () {
         del.sync('./dist', {force: true});
+        del.sync('./src/*.css', {force: true});
     });
 
-    gulp.task('dist:styles', ['dist:clean'], function () {
-        return gulp.src('./src/*.css')
-            .pipe(minifyCSS())
+    gulp.task('dist:sass', ['dist:clean'], function() {
+        return gulp
+            .src(['./src/*.scss'])
+            .pipe(sass({outputStyle: 'expanded'}))
+            .pipe(autoprefixer({browsers: ['last 2 versions', 'ie 8']}))
+            .pipe(gulp.dest('./dist'));
+    });
+
+    gulp.task('dist:styles', ['dist:clean', 'dist:sass'], function () {
+        return gulp.src('./dist/*.css')
+            .pipe(cleanCSS({ compatibility: 'ie8' }))
             .pipe(rename('daterangepicker.min.css'))
             .pipe(gulp.dest('./dist'))
             .on('error', gutil.log)
@@ -46,9 +58,23 @@
             .on('error', gutil.log)
     });
 
+    gulp.task('dev:serve', ['dist:clean', 'dist:sass', 'dist:styles'], function() {
+        browserSync.init({
+            port: 3000,
+            server: "./"
+        });
+        gulp.watch('./src/*.scss', ['simple-sass']);
+        gulp.watch('./*.html').on('change', browserSync.reload);
+    });
+
+    gulp.task('default', ['dist:clean', 'dist:sass', 'dist:styles', 'dist:script'], function (cb) {
+        gutil.log('Info :', gutil.colors.green('Distribution files v.' + pkg.version + ' are ready!'));
+        cb(null)
+    });
 
-    gulp.task('default', ['dist:clean', 'dist:styles', 'dist:script'], function (cb) {
-        gutil.log('Info :', gutil.colors.green('Distribution files are ready!'));
+    gulp.task('dev', ['dist:clean', 'dist:sass', 'dist:styles', 'dist:script', 'dev:serve'], function (cb) {
+        gutil.log('Info :', gutil.colors.green('Build complete!'));
+        gutil.log('Info :', gutil.colors.green('Opening browser on http://localhost:3000/'));
         cb(null)
     });
 

index.html

@@ -5,10 +5,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 		<title>jQuery Date Range Picker Demo</title>
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
-		<link rel="stylesheet" href="dist/daterangepicker.min.css" />
+		<link rel="stylesheet" href="dist/daterangepicker.css" />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
-		<script src="dist/jquery.daterangepicker.min.js"></script>
+		<script src="src/jquery.daterangepicker.js"></script>
 		<script src="demo.js"></script>
 		<style type="text/css">
 		#wrapper

package.json

@@ -21,6 +21,8 @@
   "homepage": "https://github.com/longbill/jquery-date-range-picker",
   "maintainers": [],
   "scripts": {
+    "dist": "gulp",
+    "dev": "gulp dev",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "engines": {
@@ -34,14 +36,18 @@
     "jquery": ">=1.3.2"
   },
   "devDependencies": {
-    "del": "^2.2.0",
-    "gulp": "^3.9",
-    "gulp-header": "^1.7",
-    "gulp-minify-css": "^1.2",
-    "gulp-jsbeautifier": "^2.1",
-    "gulp-rename": "^1.2",
-    "gulp-uglify": "^1.5",
-    "gulp-util": "^3.0"
+    "browser-sync": "^2.18.12",
+    "del": "^3.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-clean-css": "^3.5.0",
+    "gulp-header": "^1.8.8",
+    "gulp-jsbeautifier": "^2.1.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-uglify": "^3.0.0",
+    "gulp-util": "^3.0.8",
+    "gulp-watch": "^4.3.11"
   },
   "optionalDependencies": {}
 }