itzikbenh · March 29, 2023 17:17 · Jul 27, 2016 · Jul 27, 2016 · Jul 27, 2016 · Jul 27, 2016
diff --git a/gulpfile.js b/gulpfile.js
@@ -11,7 +11,7 @@ Expected file structure:
 In this folder you can have as much SASS files as you want, but you will need to have a "theme.scss" file that will import
 all other SASS files, because GULP would look for that file in order to convert it to CSS syntax. 
 
-./js/src/*.js -> You can as much files as you want. 
+./js/src/*.js -> You can have as much JS files as you want. 
 
 commands:
 "gulp" - will watch all your theme files and reload/inject on change.

diff --git a/gulpfile.js b/gulpfile.js
@@ -90,6 +90,8 @@ gulp.task('sync', function() {
     browserSync(options);
 });
 
+//When you run "gulp" it will run all the tasks that you specify in the array. Notice that the "production" task
+//is not specified, because it should be used at deployment time when everything is done. 
 gulp.task('default', ['scripts', 'sass', 'watch', 'sync']);
 
 

diff --git a/gulpfile.min.js → gulpfile.js b/gulpfile.min.js → gulpfile.js
diff --git a/gulpfile.min.js b/gulpfile.min.js
@@ -17,6 +17,8 @@ commands:
 "gulp" - will watch all your theme files and reload/inject on change.
 "gulp production" - will minify CSS and JS files. 
 
+NOTE - I'm using localhost:8888 for proxy in browser-sync config. Change it accordingly. 
+
 */
 
 var gulp        = require('gulp');

diff --git a/gulpfile.min.js b/gulpfile.min.js
@@ -1,4 +1,10 @@
 /*
+Create package.json and install all packages:
+
+1. npm init
+2. npm install -g gulp
+3. npm install gulp gulp-babel babel-preset-es2015 gulp-concat gulp-csso gulp-rename gulp-sass gulp-uglify gulp-watch browser-sync --save-dev
+
 Expected file structure:
 
 ./css/src/*.scss 
@@ -11,7 +17,6 @@ commands:
 "gulp" - will watch all your theme files and reload/inject on change.
 "gulp production" - will minify CSS and JS files. 
 
-NOTE- make sure to run copy package.json and run "npm install" first.
 */
 
 var gulp        = require('gulp');

diff --git a/gulpfile.min.js b/gulpfile.min.js
@@ -1,3 +1,19 @@
+/*
+Expected file structure:
+
+./css/src/*.scss 
+In this folder you can have as much SASS files as you want, but you will need to have a "theme.scss" file that will import
+all other SASS files, because GULP would look for that file in order to convert it to CSS syntax. 
+
+./js/src/*.js -> You can as much files as you want. 
+
+commands:
+"gulp" - will watch all your theme files and reload/inject on change.
+"gulp production" - will minify CSS and JS files. 
+
+NOTE- make sure to run copy package.json and run "npm install" first.
+*/
+
 var gulp        = require('gulp');
 var concat      = require('gulp-concat');
 var sass        = require('gulp-sass');

diff --git a/gulpfile.min.js b/gulpfile.min.js
@@ -21,6 +21,7 @@ gulp.task('sass', function() {
         .pipe(sass())
         .pipe(gulp.dest('./css'));
 });
+
 //run "gulp production" so you can serve minifed files when you deploy to production
 gulp.task('production', function() {
     gulp.src('./js/theme.js')

diff --git a/gulpfile.min.js b/gulpfile.min.js
@@ -0,0 +1,73 @@
+var gulp        = require('gulp');
+var concat      = require('gulp-concat');
+var sass        = require('gulp-sass');
+var watch       = require('gulp-watch');
+var babel       = require('gulp-babel');
+var browserSync = require('browser-sync');
+var csso        = require('gulp-csso');
+var uglify      = require('gulp-uglify');
+var rename      = require('gulp-rename');
+
+
+gulp.task('scripts', function() {
+    gulp.src('./js/src/*.js')
+        .pipe(concat('theme.js'))
+        .pipe(babel({ presets: ['es2015'] }))
+        .pipe(gulp.dest('./js/'));
+});
+
+gulp.task('sass', function() {
+    gulp.src('./css/src/theme.scss')
+        .pipe(sass())
+        .pipe(gulp.dest('./css'));
+});
+//run "gulp production" so you can serve minifed files when you deploy to production
+gulp.task('production', function() {
+    gulp.src('./js/theme.js')
+        .pipe(uglify())
+        .pipe(rename({
+             suffix: '.min'
+         }))
+        .pipe(gulp.dest('./js'));
+
+    gulp.src('./css/theme.css')
+        .pipe(csso())
+        .pipe(rename({
+             suffix: '.min'
+         }))
+        .pipe(gulp.dest('./css'));
+});
+
+gulp.task('watch',['scripts', 'sass'], function () {
+    gulp.watch('./js/src/*.js' , ['scripts']);
+    gulp.watch('./css/src/*.scss' , ['sass']);
+});
+
+gulp.task('sync', function() {
+    var options = {
+        proxy: 'localhost:8888',
+        port: 3000,
+        files: [
+            '**/*.*'
+        ],
+        ghostMode: {
+            clicks: true,
+            location: false,
+            forms: true,
+            scroll: true
+        },
+        injectChanges: true,
+        logFileChanges: true,
+        logLevel: 'debug',
+        logPrefix: 'gulp-patterns',
+        notify: true,
+        reloadDelay: 0
+    };
+    browserSync(options);
+});
+
+gulp.task('default', ['scripts', 'sass', 'watch', 'sync']);
+
+
+
+
No results found