I'm trying to run Gulp to minify CSS, JS and move all the static stuffs (template, font, img) into build folder.
My project directory structure:
- project
|- gulpfile.js
|- package.json
|- src
||- font
||- img
||- js
||- sass
||- template
|- build
||- css
||- font
||- img
||- js
||- template
My gulpfile.js:
var PATH = {
SRC: {
SASS: 'src/sass/',
JS: 'src/js/',
TEMPLATE: 'src/template/',
},
DEST: {
CSS: 'build/css/',
JS: 'build/js/',
TEMPLATE: 'build/template/',
}
};
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
sass = require('gulp-ruby-sass'),
uglify = require('gulp-uglify');
gulp.task('compress', function() {
return gulp.src(PATH.SRC.JS + '*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest(PATH.DEST.JS))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(PATH.DEST.JS));
});
gulp.task('styles', function() {
return gulp.src(PATH.SRC.SASS + '*.scss')
.pipe(sass(PATH.SRC.SASS, { style: 'expanded' }))
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9'],
cascade: true
}))
.pipe(concat('all.css'))
.pipe(gulp.dest(PATH.DEST.CSS))
.pipe(rename({suffix: '.min'}))
.pipe(minifyCss())
.pipe(gulp.dest(PATH.DEST.CSS));
});
gulp.task('watch', function() {
gulp.watch(PATH.SRC.SASS + '*.scss', ['styles']);
gulp.watch(PATH.SRC.JS + '*.js', ['compress']);
});
gulp.task('default', ['watch', 'styles', 'compress']);
When I run gulp or gulp watch I get this error:
/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623
var written = dest.write(chunk);
^
TypeError: undefined is not a function
at write (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at DestroyableTransform.emit (events.js:104:17)
at emitReadable_ (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
at emitReadable (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
at readableAddChunk (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)
at DestroyableTransform.Readable.push (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:149:10)
at DestroyableTransform.Transform.push (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:145:32)
at afterTransform (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:101:12)
How can I fix this?
gulp-ruby-sass changed it's API recently. So you can't pipe something through to the Sass task, but rather need to start with it. Much like browserify does. gulp-ruby-sass creates a stream, though, so the rest of the pipe should work fine:
gulp.task('styles', function() {
return sass(PATH.SRC.SASS, { style: 'expanded' })
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9'],
cascade: true
}))
.pipe(concat('all.css'))
.pipe(gulp.dest(PATH.DEST.CSS))
.pipe(rename({suffix: '.min'}))
.pipe(minifyCss())
.pipe(gulp.dest(PATH.DEST.CSS));
});
Related
Have been unable to get Browsersync working in Gulp.
I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all.
I am using MAMP and the site works fine.
Tried a few things but limited gulpfile knowledge.
thanks in advance.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
babel = require('gulp-babel'),
browserSync = require('browser-sync').create();
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified
styles
.pipe(gulp.dest('./assets/css/'))
});
// JSHint, concat, and minify JavaScript
gulp.task('site-js', function() {
return gulp.src([
// Grab your custom scripts
'./assets/js/scripts/*.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest('./assets/js'))
});
// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
return gulp.src([
// Foundation core - needed if you want to use any of the
components below
'./vendor/foundation-sites/js/foundation.core.js',
'./vendor/foundation-sites/js/foundation.util.*.js',
// Pick the components you need in your project
'./vendor/foundation-sites/js/foundation.abide.js',
'./vendor/foundation-sites/js/foundation.accordion.js',
'./vendor/foundation-sites/js/foundation.accordionMenu.js',
'./vendor/foundation-sites/js/foundation.drilldown.js',
'./vendor/foundation-sites/js/foundation.dropdown.js',
'./vendor/foundation-sites/js/foundation.dropdownMenu.js',
'./vendor/foundation-sites/js/foundation.equalizer.js',
'./vendor/foundation-sites/js/foundation.interchange.js',
'./vendor/foundation-sites/js/foundation.magellan.js',
'./vendor/foundation-sites/js/foundation.offcanvas.js',
'./vendor/foundation-sites/js/foundation.orbit.js',
'./vendor/foundation-sites/js/foundation.responsiveMenu.js',
'./vendor/foundation-sites/js/foundation.responsiveToggle.js',
'./vendor/foundation-sites/js/foundation.reveal.js',
'./vendor/foundation-sites/js/foundation.slider.js',
'./vendor/foundation-sites/js/foundation.sticky.js',
'./vendor/foundation-sites/js/foundation.tabs.js',
'./vendor/foundation-sites/js/foundation.toggler.js',
'./vendor/foundation-sites/js/foundation.tooltip.js',
])
.pipe(babel({
presets: ['es2015'],
compact: true
}))
.pipe(sourcemaps.init())
.pipe(concat('foundation.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified
Foundation JS
.pipe(gulp.dest('./assets/js'))
});
// Update Foundation with Bower and save to /vendor
gulp.task('bower', function() {
return bower({ cmd: 'update'})
.pipe(gulp.dest('vendor/'))
});
// Browser-Sync watch files and inject changes
gulp.task('browsersync', function() {
// Watch files
var files = [
'./assets/css/*.css',
'./assets/js/*.js',
'**/*.php',
'assets/images/**/*.{png,jpg,gif,svg,webp}',
];
browserSync.init(files, {
// Replace with URL of your local site
proxy: "s18.dev",
});
gulp.watch('./assets/scss/**/*.scss', ['styles']);
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change',
browserSync.reload);
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('./assets/scss/**/*.scss', ['styles']);
// Watch site-js files
gulp.watch('./assets/js/scripts/*.js', ['site-js']);
// Watch foundation-js files
gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']);
});
// Run styles, site-js and foundation-js
gulp.task('default', function() {
gulp.start('styles', 'site-js', 'foundation-js');
});
It was in fact my lack of gulp knowledge....
On closer inspection of the gulpfile, there were 2 functions - one with BS and one without...
I was running 'gulp watch' with no joy, whereas simply running 'gulp browsersync' did the trick.
bonza.
In my project folder, I have pug files that are located in src/pug/*.pug, one of those files is index.pug. When compiled to html, the compiled files are located in build/templates/*.html. In the serve task, in browsersync.init(), I changed the baseDir from ./ to build/templates/ because the compiled index.html is located there. The problem is, browsersync livereload does not work; I have to refresh the browser just to see the changes I make in index.pug.
Gulpfile.js
const gulp = require('gulp'),
sass = require('gulp-sass'),
pug = require('gulp-pug'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync');
gulp.task('templates', () => {
return gulp.src('src/pug/*.pug')
.pipe(plumber())
.pipe(pug({pretty: true}))
.pipe(gulp.dest('build/templates/'))
.pipe(browserSync.stream({stream: true}));
});
gulp.task('styles', () => {
return gulp.src('src/sass/**/*.sass')
.pipe(plumber())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('build/css/all/'))
.pipe(concat('style.css'))
.pipe(gulp.dest('build/css/'))
.pipe(browserSync.stream({stream: true}));
});
gulp.task('scripts', () => {
return gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(concat('script.js'))
.pipe(gulp.dest('build/js/'))
.pipe(browserSync.stream({stream: true}));
});
gulp.task('imagemin', () => {
gulp.src('assets/img/src/**/*')
.pipe(imagemin())
.pipe(gulp.dest('assets/img/dist/'));
});
gulp.task('serve', ['templates', 'styles', 'scripts'], () => {
browserSync.init({
server: {
baseDir: 'build/templates/'
},
notify: false
});
gulp.watch('src/pug/*.pug', ['templates']);
gulp.watch('src/sass/**/*.sass', ['styles']);
gulp.watch('src/js/*.js', ['scripts']);
gulp.watch('build/templates/index.html').on('change', browserSync.reload);
});
gulp.task('default', ['imagemin', 'serve']);
Can someone help me fix this?
Not sure why that doesn't work, but I have compared your build file to the official docs, and I came across this approach from the docs: Instead of watching the HTML files, it watches the source (pug files in your case) and calls browserSync.reload after that source compilation task has completed. In your case, the pug line would be replaced by something like this:
gulp.watch('src/pug/*.pug', ['templates-watch']);
And you would create a new task, called templates-watch, that would be defined as follows:
gulp.task('templates-watch', ['templates'], function (done) {
browserSync.reload();
done();
});
I've been trying to compile changes to #imports along with those to main SCSS files, and basically have this working.
The issue with my setup: To see changes, I must save files twice (irrespective of whether they're main files or imports). Ideas on this are greatly appreciated.
The directory structure is simply:
--> SCSS
--> SCSS/partials
Here are the relevant parts of my gulpfile:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sync = require('browser-sync').create(); // create a browser sync instance.
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
var paths = {
'assets': 'assets',
'dev': 'assets/styles/dev'
};
// DEV CSS
gulp.task('dev-styles', function() {
return gulp.src(['scss/**/*.scss', 'scss/*.scss'])
.pipe($.sass({
includePaths: sassPaths,
outputStyles: 'expanded'
})
.on('error', $.sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(rename({
suffix: '.dev'
}))
.pipe(gulp.dest('paths.dev'));
});
// DEFAULT WATCH
gulp.task('default', function() {
sync.init({
injectChanges: true,
proxy: 'localhost/basic-modx'
});
gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ], ['dev-styles']);
gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ]).on('change', sync.reload);
});
Your watches are set up oddly. I suspect that the second which reloads the browser finishes before the first which actually transpiles the scss, so nothing has changed when the reload occurs. Hence you have to hit save twice.
The better way from browserSync documentation is to have the reload at the end of your 'dev-styles' task like this:
gulp.task('dev-styles', function() {
return gulp.src(['scss/**/*.scss', 'scss/*.scss'])
.pipe($.sass({
includePaths: sassPaths,
outputStyles: 'expanded'
})
.on('error', $.sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(rename({
suffix: '.dev'
}))
.pipe(gulp.dest('paths.dev'));
.pipe(sync.stream());
});
and get rid of the second gulp.watch statement.
if I add a new component (_example.scss) to my master.scss and safe it my browser-sync reload automatically and show the style changes from "_example.scss". If I change another thing in this file and safe it, my browser doesnt reload... Any ideas? If I restart gulp, it works perfectly. Is it possible to reinitialize the files that proceed by browser-sync?
Heres my gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var cssmin = require('gulp-cssmin');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var changed = require('gulp-changed');
var autoprefixer = require('gulp-autoprefixer');
var reload = browserSync.reload;
// Compile
gulp.task('sass-master', function () {
gulp.src('./files/layout/scss/master.scss')
.pipe(plumber())
.pipe(sass({}).on('error', function(err) {
return notify().write(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(cssmin())
.pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
.pipe(gulp.dest('./files/layout/css'))
.pipe(notify('sass-master-task done, ready!'));
});
gulp.task('sass-ieframe', function () {
gulp.src('./files/layout/scss/base/ieframe.scss')
.pipe(plumber())
.pipe(sass({}).on('error', function(err) {
return notify().write(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(cssmin())
.pipe(gulp.dest('./files/layout/css'))
.pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
.pipe(notify('sass-ieframe-task done, ready!'));
});
gulp.task('sass-fonts', function () {
gulp.src('./files/layout/scss/base/fonts.scss')
.pipe(plumber())
.pipe(sass({}).on('error', function(err) {
return notify().write(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(cssmin())
.pipe(gulp.dest('./files/layout/css'))
.pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
.pipe(notify('sass-fonts-task done, ready!'));
});
// Serve
gulp.task('browser-sync', function() {
browserSync.init(['./files/layout/css/*.css'], {
proxy: 'dumb-test'
});
});
// Reload Task
gulp.task('bs-reload', function () {
browserSync.reload();
});
// Watch Task
gulp.task('default', ['sass-master', 'sass-fonts', 'sass-ieframe', 'browser-sync'], function () {
gulp.watch(['./files/layout/scss/**/*.scss', './files/layout/scss/master.scss', '!./files/layout/scss/base/ieframe.scss', '!./files/layout/scss/base/fonts.scss'], ['sass-master', 'bs-reload'])
gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe', 'bs-reload'])
gulp.watch(['./files/layout/scss/base/fonts.scss'], ['sass-fonts', 'bs-reload'])
gulp.watch(['./templates/**/*'], ['bs-reload'])
gulp.watch(['./files/**/*.+(png|jpg|gif|svg)'], ['bs-reload'])
});
I'd say it's a timing issue. Gulp runs tasks in parallel, and your reload tasks should really wait until after the build has finished. e.g. instead of
gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe', 'bs-reload'])
it should be
gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe-watch']
with a separate task
gulp.task('sass-ieframe-watch', ['sass-ieframe'], function(done) {
browserSync.reload();
done();
});
Better would be for your sass tasks to reload in the task itself using the streaming option. And the above style used for everything other than sass. This is so that browserSync injects the new css without a full page reload, but the reload is still required for js & html. See https://www.browsersync.io/docs/gulp
I'm experiencing strange behaviour using this Gulp configuration to minify my SASS files generating sourcemaps.
'use strict';
var PATH = {
SRC_DIR: 'src/',
SRC: {
IMG: 'img/',
INDEX: 'index.html',
JS: {
DIR: 'js/',
FILE: [
'app.js',
'**/*.js',
'controller/**/*.js',
'factory/**/*.js',
'directive/**/*.js',
'model/**/*.js'
]
},
SASS: 'sass/',
TEMPLATE: 'template/'
},
DEST_DIR: 'dist/',
DEST: {
CSS: {
DIR: 'css/',
FILE: 'full.css'
},
IMG: 'img/',
JS: {
DIR: 'js/',
FILE: 'full.js'
},
LIB: 'lib/',
TEMPLATE: 'template/',
}
};
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
sass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('styles', function() {
return sass(PATH.SRC_DIR + PATH.SRC.SASS, {
sourcemap: true,
style: 'expanded'
})
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9'],
cascade: true
}))
.pipe(concat(PATH.DEST.CSS.FILE))
.pipe(gulp.dest(PATH.DEST_DIR + PATH.DEST.CSS.DIR))
.pipe(rename({suffix: '.min'}))
.pipe(minifyCss())
.pipe(sourcemaps.write())
.pipe(gulp.dest(PATH.DEST_DIR + PATH.DEST.CSS.DIR));
});
gulp.task('watch', function() {
gulp.watch(PATH.SRC_DIR + PATH.SRC.SASS + '**/*.scss', ['styles']);
});
gulp.task('default', ['watch', 'styles']);
The first time I run this script using gulp it'll generate a correct full.min.css and it waits for changes in the SASS directory.
When you change something inside SASS files it'll trigger the watch and re-run the styles task, which will build a full.min.css.
You see the changes in the front-end but this minified file becomes bigger and bigger at every rebuild.
If I omit the sourcemaps inside styles task it seems to work fine.
The full.css file is always ok.
What am I missing here? Why the minified version keeps increasing its dimension?