Skip to content

Instantly share code, notes, and snippets.

@princeppy

princeppy/Gulpfile.js

Forked from DESIGNfromWITHIN/Gulpfile.js
Created July 28, 2018 09:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save princeppy/1cc74fa6a8b954e5fbed116ffe2b18e7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save princeppy/1cc74fa6a8b954e5fbed116ffe2b18e7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Menno Pietersen revised this gist Sep 15, 2015. 1 changed file with 0 additions and 5 deletions.
    5 changes: 0 additions & 5 deletions Gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -30,11 +30,6 @@ var plumber = require('gulp-plumber');
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;

    /* Setup scss path */
    var paths = {
    scss: './sass/*.scss'
    };

    /* Scripts task */
    gulp.task('scripts', function() {
    return gulp.src([
  2. Menno Pietersen revised this gist Jan 6, 2015. 1 changed file with 19 additions and 17 deletions.
    36 changes: 19 additions & 17 deletions Gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ npm install gulp gulp-util gulp-sass gulp-uglify gulp-rename gulp-minify-css gul
    5. Type 'Gulp' and ster developing
    */

    // Needed gulp config
    /* Needed gulp config */
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var uglify = require('gulp-uglify');
    @@ -30,15 +30,15 @@ var plumber = require('gulp-plumber');
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;

    // Setup scss path
    /* Setup scss path */
    var paths = {
    scss: './sass/*.scss'
    };

    // Scripts task
    /* Scripts task */
    gulp.task('scripts', function() {
    return gulp.src([
    // Add your JS files here, they will be combined in this order
    /* Add your JS files here, they will be combined in this order */
    'js/vendor/jquery-1.11.1.js',
    'js/app.js'
    ])
    @@ -49,7 +49,7 @@ gulp.task('scripts', function() {
    .pipe(gulp.dest('js'));
    });

    // Sass task
    /* Sass task */
    gulp.task('sass', function () {
    gulp.src('scss/style.scss')
    .pipe(plumber())
    @@ -60,35 +60,37 @@ gulp.task('sass', function () {
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
    // Reload the browser CSS after every change
    /* Reload the browser CSS after every change */
    .pipe(reload({stream:true}));
    });

    // Reload task
    /* Reload task */
    gulp.task('bs-reload', function () {
    browserSync.reload();
    });

    // Prepare Browser-sync for localhost
    /* Prepare Browser-sync for localhost */
    gulp.task('browser-sync', function() {
    browserSync.init(["css/*.css", "js/*.js"], {
    // I like to use a vhost, WAMP guide: https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp, XAMP guide: http://sawmac.com/xampp/virtualhosts/
    proxy: "your_dev_site.url"
    // For a static server you would use this:
    browserSync.init(['css/*.css', 'js/*.js'], {
    /*
    I like to use a vhost, WAMP guide: https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp, XAMP guide: http://sawmac.com/xampp/virtualhosts/
    */
    proxy: 'your_dev_site.url'
    /* For a static server you would use this: */
    /*
    server: {
    baseDir: "./"
    baseDir: './'
    }
    */
    });
    });

    // Watch scss, js and html files, doing different things with each.
    /* Watch scss, js and html files, doing different things with each. */
    gulp.task('default', ['sass', 'browser-sync'], function () {
    // Watch scss, run the sass task on change.
    /* Watch scss, run the sass task on change. */
    gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass'])
    // Watch app.js file, run the scripts task on change.
    /* Watch app.js file, run the scripts task on change. */
    gulp.watch(['js/app.js'], ['scripts'])
    // Watch .html files, run the bs-reload task on change.
    /* Watch .html files, run the bs-reload task on change. */
    gulp.watch(['*.html'], ['bs-reload']);
    });
  3. Menno Pietersen revised this gist Jan 6, 2015. 1 changed file with 75 additions and 8 deletions.
    83 changes: 75 additions & 8 deletions Gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,94 @@
    /*
    Gulpfile.js file for the tutorial:
    Using Gulp, SASS and Browser-Sync for your front end web development - DESIGNfromWITHIN
    http://designfromwithin.com/blog/gulp-sass-browser-sync-front-end-dev
    Steps:
    1. Install gulp globally:
    npm install --global gulp
    2. Type the following after navigating in your project folder:
    npm install gulp gulp-util gulp-sass gulp-uglify gulp-rename gulp-minify-css gulp-notify gulp-concat gulp-plumber browser-sync --save-dev
    3. Move this file in your project folder
    4. Setup your vhosts or just use static server (see 'Prepare Browser-sync for localhost' below)
    5. Type 'Gulp' and ster developing
    */

    // Needed gulp config
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    var notify = require('gulp-notify');
    var minifycss = require('gulp-minify-css');
    var concat = require('gulp-concat');
    var plumber = require('gulp-plumber');
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;

    // Setup scss path
    var paths = {
    scss: './sass/*.scss'
    };

    // Scripts task
    gulp.task('scripts', function() {
    return gulp.src([
    // Add your JS files here, they will be combined in this order
    'js/vendor/jquery-1.11.1.js',
    'js/app.js'
    ])
    .pipe(concat('main.js'))
    .pipe(gulp.dest('js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('js'));
    });

    // Sass task
    gulp.task('sass', function () {
    gulp.src('scss/app.scss')
    .pipe(sass({
    includePaths: ['scss'].concat(neat)
    }))
    .pipe(gulp.dest('css'));
    gulp.src('scss/style.scss')
    .pipe(plumber())
    .pipe(sass({
    includePaths: ['scss'].concat(neat)
    }))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
    // Reload the browser CSS after every change
    .pipe(reload({stream:true}));
    });

    // Reload task
    gulp.task('bs-reload', function () {
    browserSync.reload();
    });

    gulp.task('browser-sync', function() {
    // Prepare Browser-sync for localhost
    gulp.task('browser-sync', function() {
    browserSync.init(["css/*.css", "js/*.js"], {
    // I like to use a vhost, WAMP guide: https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp, XAMP guide: http://sawmac.com/xampp/virtualhosts/
    proxy: "your_dev_site.url"
    // For a static server you would use this:
    /*
    server: {
    baseDir: "./"
    }
    */
    });
    });

    gulp.task('watch', ['sass', 'browser-sync'], function () {
    gulp.watch(["scss/*.scss"], ['sass']);
    // Watch scss, js and html files, doing different things with each.
    gulp.task('default', ['sass', 'browser-sync'], function () {
    // Watch scss, run the sass task on change.
    gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass'])
    // Watch app.js file, run the scripts task on change.
    gulp.watch(['js/app.js'], ['scripts'])
    // Watch .html files, run the bs-reload task on change.
    gulp.watch(['*.html'], ['bs-reload']);
    });
  4. Menno Pietersen revised this gist Apr 30, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var neat = require('node-neat').includePaths;
    var browserSync = require('browser-sync');

    var paths = {
  5. Menno Pietersen revised this gist Apr 30, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,5 +24,5 @@ gulp.task('browser-sync', function() {
    });

    gulp.task('watch', ['sass', 'browser-sync'], function () {
    gulp.watch(["scss/*.scss", "scss/base/*.scss", "scss/sections/*.scss", "scss/style/*.scss"], ['sass']);
    gulp.watch(["scss/*.scss"], ['sass']);
    });
  6. Menno Pietersen created this gist Apr 28, 2014.
    28 changes: 28 additions & 0 deletions Gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var neat = require('node-neat').includePaths;
    var browserSync = require('browser-sync');

    var paths = {
    scss: './sass/*.scss'
    };

    gulp.task('sass', function () {
    gulp.src('scss/app.scss')
    .pipe(sass({
    includePaths: ['scss'].concat(neat)
    }))
    .pipe(gulp.dest('css'));
    });

    gulp.task('browser-sync', function() {
    browserSync.init(["css/*.css", "js/*.js"], {
    server: {
    baseDir: "./"
    }
    });
    });

    gulp.task('watch', ['sass', 'browser-sync'], function () {
    gulp.watch(["scss/*.scss", "scss/base/*.scss", "scss/sections/*.scss", "scss/style/*.scss"], ['sass']);
    });