Synchronize browser & zip theme with gulp

Hi there,

I’m trying to use Gulp for developing my theme, I installed the files, and all, but it don’t synchronise with the browser when I modify the sass, and even I can’t use gulp to zip the files, I don’t know why it’s not working

  • What’s your URL? This is the easiest way for others to debug your issue
    I’m developing the theme locally
  • What version of Ghost are you using?
    Last version
  • What configuration?
    Mac OS
    NPM version 6.11.3
  • What browser?
    All, but mostly Safari
  • What errors or information do you see in the console?
    No errors with gulp and sass,
    When I try to zip with gulp, the console say that the script is missing
  • What steps could someone else take to reproduce the issue you’re having?
    I don’t really know, as gulp is working well unless synchronizing with the browser and zip

If anyone can help, thanks in advance!

Can you share the output of gulp zip?

Are you asking why the browser doesn’t auto-reload when you make changes to your sass? If so, take a look at this thread:

Hi @vikaspotluri123 :slight_smile:

When I make changes to a sass file, the browser auto-reload, but the changes don’t appear. I have to copy-paste de files myself in a new folder and zip it myself and upload it and then the modifications appear.

Today, I started gulp via the console, and this message showed up (so I can’t provide you the zip error message :confused:):

/Users/matt/Documents/.../gulpfile.js:111
const gulp = require('gulp');
      ^

SyntaxError: Identifier 'gulp' has already been declared
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at execute (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
    at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp-cli/index.js:201:24)
    at Liftoff.execute (/usr/local/lib/node_modules/gulp-cli/node_modules/liftoff/index.js:201:12)

Thanks in advance!

So,

I tried to run gulp all over again in a new folder, and start from scratch

The same problem showed up:

  • I make changes in sass files
  • The console show that changes are made in the files
  • But it makes no changes in the browser, even if I refresh manually

What I need to do, is to zip the files by myself, and upload it manually, and then the modifications are ok

When I ran gulp, the local:host url is this one:
localhost:3000

Which is different than the one I run local ghost:
localhost:2368

Sorry, I’m new with gulp, so, any help is welcome! ^^

Thanks in advance,

What theme are you using? It looks like there might be something with the gulp file.

Check out this thread for my theme development workflow:

Hi :slight_smile:

I’m working with a theme named Clifford

The code of the gulp file is like this:

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  browserSync = require('browser-sync'),
  notify = require('gulp-notify'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify-es').default,
  cleancss = require('gulp-clean-css'),
  autoprefixer = require('gulp-autoprefixer'),
  zip = require('gulp-zip'),
  del = require('del');

// Local Server
gulp.task('browser-sync', function () {
  browserSync({
    proxy: 'http://localhost:2368',
    // server: {
    //   baseDir: ''
    // },
    notify: false
    // open: false,
    // online: false, // Work Offline Without Internet Connection
    // tunnel: true, tunnel: "projectname", // Demonstration page: http://projectname.localtunnel.me
  });
});


// HBS Live Reload
gulp.task('code', function () {
  return gulp.src(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs'])
    .pipe(browserSync.reload({ stream: true }));
});


// Custom Styles
gulp.task('sass', function () {
  return gulp.src('./assets/sass/*.scss')
    .pipe(sass({ outputStyle: 'expanded' }).on('error', notify.onError()))
    .pipe(concat('main.min.css'))
    .pipe(
      autoprefixer({
        grid: true,
        overrideBrowserslist: ['last 10 versions']
      })
    )
    .pipe(cleancss({ level: { 1: { specialComments: 0 } } })) // Optional. Comment out when debugging
    .pipe(gulp.dest('./assets/css'))
    .pipe(browserSync.stream());
});


// Scripts & JS Libraries
gulp.task('js', function () {
  return gulp
    .src([
      './assets/js/vendors/jquery-3.3.1.min.js',
      './assets/js/vendors/zoom.min.js',
      './assets/js/vendors/transition.js',
      './assets/js/vendors/jquery.fitvids.js',
      './assets/js/vendors/jquery.ghosthunter.js',
      './assets/js/vendors/jquery.viewportchecker.min.js',
      './assets/js/vendors/prism.js',
      './assets/js/vendors/slick.min.js',
      './assets/js/common.js'
    ])
    .pipe(concat('common.min.js'))
    .pipe(uglify()) // Minify js (opt.)
    .pipe(gulp.dest('./assets/js'))
    .pipe(browserSync.reload({ stream: true }))
});


// Production - Compress Theme
gulp.task('zip', function () {
  var targetDir = 'dist/';
  var themeName = require('./package.json').name;
  var filename = themeName + '.zip';

  return gulp
    .src([
      './**',
      '!node_modules',
      '!node_modules/**',
      '!package-lock.json',
      '!dist',
      '!dist/**',
      '!.gitignore',
      '!**/Thumbs.db',
      '!**/*.DS_Store'
    ])
    .pipe(zip(filename))
    .pipe(gulp.dest(targetDir));
});


// Remove Dist Folder
gulp.task('clean', function () {
  return del(['dist'], { force: true })
});


gulp.task('watch', function () {
  gulp.watch('./assets/sass/**/*.scss', gulp.parallel('sass'));
  gulp.watch(['./assets/js/common.js', './assets/js/vendors/*.js'], gulp.parallel('js'));
  gulp.watch(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs'], gulp.parallel('code'));
});

gulp.task('default', gulp.parallel('sass', 'js', 'browser-sync', 'watch'));

gulp.task('production', gulp.parallel('sass', 'js', 'zip'));

I’d love to try the solution with your workflow, but I had to understand it first, I have never done that before ^^

This doesn’t seem to be the gulpfile that is erroring - this file has 109 lines while the error is on line 111 :crazy_face:

^^’

Ok maybe I’m doing it wrong, but that’s how I put gulp in the folder to run it:

  • Open terminal
  • locating the folder and the root of the theme (example: cd user/mylocation)
  • install npm in it with the command npm install
  • Once install, run gulp with the command gulp

Version of:

  • npm 6.11.3
  • Gulp CLI 2.2.0 (local version: unknown)
  • node v10.17.0

What happens when you run npx gulp ...? This wll use the local version of gulp rather than the globally installed version

Hi, I tried with npx gulp, but nothing change :confused:

can you try rm -rf node_modules; yarn install?