I am using Laravel 5. During gulp task, the processed SASS files and other CSS files copied from resource folder are stored in public/css.
Then all the files in the public/css are merged together to a single file as "all.css". So the files that were created needs to be deleted.
How can I do this?
For newer versions of laravel this worked for me:
var elixir = require('laravel-elixir');
var del = require('del');
elixir.extend('remove', function(path) {
new elixir.Task('remove', function() {
del(path);
});
});
elixir(function(mix) {
mix.remove([ 'public/css', 'public/js' ]);
});
Cheers!
It was well explained here , anyway just in case it is a broken link, this is what I do and works perfectly. Basically you have to extend gulp and add a "remove" function which uses "del", your last task is just removing the intermediate files once the versioning is finished.
var gulp = require('gulp');
var elixir = require('laravel-elixir');
var del = require('del');
elixir.extend("remove", function(path) {
gulp.task("remove", function() {
del(path);
});
return this.queueTask("remove");
});
// Usage
elixir(function(mix) {
mix.remove([ 'public/css', 'public/js' ]);
});
You will probably need to install some npm pagackes like so:
$ npm install --save-dev del
$ npm install --save-dev wrappy
$ npm install --save-dev brace-expansion
Related
I need to run jekyll build during gulp watch task and I did that as per the following code.
var gulp = require('gulp-help')(require('gulp')),
sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('jekyll-build', function (done) {
return cp.spawn(jekyll, ['build'], {stdio: 'inherit'})
.on('close', done);
});
gulp.task('default', ['sass'], function(){
gulp.watch(['_includes/**/*.js', '_includes/**/*._', 'assets/styles/**/*.scss'], ['jekyll-build', 'sass']);
});
When I make some changes in any file and try to save at once, command runs in terminal but it is not getting reflected in UI. I need to save twice or thrice to get the changes reflected. Not sure what's the issue or whether its the issue of the gulp watch code added here. Any help is appreciated.
When you say the changes are not reflected do you mean the browser is not refreshing?
The line to launch jekyll build is different for mac vs Windows, your looks like it is for a Mac, on Windows I use jekyll.bat on this line (jekyll, ['build'].
In your watch step you are not watching very much. Rather than try to tell gulp to watch every different thing I do the opposite and tell gulp to watch everything **/*.* and then tell it what not to watch like !_site/**/*. This also lets you watch the config file for changes.
Also, it doesn't look like you are live-reloading with browser sync, that is half the fun of using gulp with jekyll (other half is having gulp do sass processing as it is much faster than jekyll).
Here is a gulp file that I use and a link to a write up I did about it:
https://rdyar.github.io/2017/10/01/speed-up-jekyll-by-using-gulp-for-sass-and-other-assets/
var gulp = require('gulp');
var browserSync = require('browser-sync');
var cp = require('child_process');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var cssnano = require('cssnano');
var imagemin = require('gulp-imagemin');
var htmlhint = require("gulp-htmlhint");
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
// Gulp as asset manager for jekyll. Please note that the assets folder is never cleaned
//so you might want to manually delete the _site/assets folder once in a while.
// this is because gulp will move files from the assets directory to _site/assets,
// but it will not remove them from _site/assets if you remove them from assets.
/**
* Build the Jekyll Site - for windos. If you are on a Mac/linux change jekyll.bat to just jekyll
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll.bat', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload when watched files change
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('serve', ['jekyll-build'], function() {
browserSync.init({
server: "_site/"
});
});
/**
* Watch jekyll source files for changes, don't watch assets
*/
gulp.task('watch', function () {
gulp.watch(['**/*.*', '!_site/**/*','!_assets/**/*','!node_modules/**/*','!.sass-cache/**/*' ], ['jekyll-rebuild']);
});
//watch just the sass files - no need to rebuild jekyll
gulp.task('watch-sass', ['sass-rebuild'], function() {
gulp.watch(['_assets/sass/**/*.scss'], ['sass-rebuild']);
});
// watch just the js files
gulp.task('watch-js', ['js-rebuild'], function() {
gulp.watch(['_assets/js/**/*.js'], ['js-rebuild']);
});
// watch just the image files
gulp.task('watch-images', ['images-rebuild'], function() {
gulp.watch(['_assets/img/**/*.*'], ['images-rebuild']);
});
//if sass files change just rebuild them with gulp-sass and what not
gulp.task('sass-rebuild', function() {
var plugins = [
autoprefixer({browsers: ['last 2 version']}),
cssnano()
];
return gulp.src('_assets/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe( gulp.dest('_site/assets/css/') )
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('js-rebuild', function(cb) {
return gulp.src('_assets/js/**/*.js')
.pipe(uglify())
.pipe( gulp.dest('_site/assets/js/') )
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('images-rebuild', function(cb) {
return gulp.src('_assets/img/**/*.*')
.pipe( gulp.dest('_site/assets/img/') )
.pipe(browserSync.reload({
stream: true
}))
});
/**
* Default task, running just `gulp` will
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['serve', 'watch','watch-sass','watch-js','watch-images']);
//build and deploy stuff
gulp.task('imagemin', function() {
console.log('Minimizing images in source!!');
return gulp.src('_assets/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
gulp.task('w3', function() {
gulp.src("_site/**/*.html")
.pipe(htmlhint())
.pipe(htmlhint.reporter())
})
// validate from the command line instead, works better
// npm install htmlhint -g
// htmlhint _site/**/*.html
According to this it's possible to compile susy install from Ruby with Gulp.
But is it possible to use gulp-sass instead of gulp-compass or gulp-ruby-sass because of performance and deprecation ?
Actually I use this in my gulpfile.js:
gulpfile
var gulp = require('gulp');
// Include plugins
var plugins = require('gulp-load-plugins')();
// Variables de chemins
var source = './sass/**/*.scss'; // dossier de travail
var destination = './css/'; // dossier à livrer
gulp.task('sasscompil', function () {
return gulp.src(source)
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
}).on('error', sasscompil.logError))
.pipe(plugins.csscomb())
.pipe(plugins.cssbeautify({indent: ' '}))
.pipe(plugins.autoprefixer())
.pipe(gulp.dest(destination + ''));
});
But the error log doesn't work because sasscompil isn't define.
Then I need to give the path for all ex-compass includes like susy, sassy-button,etc..
is it possible to give a global path for gems ?
other thing, do I install gulp plugins despite of using gulp-load-plugins ? because gulp doesn't find plugins if I don't do that.
Thanks
You need to change sasscompil.logError to plugins.sass.logError
such that
gulpfile.js
gulp.task('sasscompil', function () {
return gulp.src(source)
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
}).on('error', plugins.sass.logError))
...
});
gulp-sass doc:
Pass in options just like you would for node-sass; they will be passed along just as if you were using node-sass. Except for the data option which is used by gulp-sass internally. Using the file option is also unsupported and results in undefined behaviour that may change without notice.
example
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
I need to perform after mix.less ('app.less') automatically reloads the page. What would not press each time F5
gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.less('app.less');
mix.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch');
});
Is it possible to use it as a gulp browser-sync ?
I’m afraid there is no way to use livereload with elixir yet.
I suggest you to quite using elixir and start using all the freedom of general versatile gulp plugins.
My recipe for live reload with Livereload:
Install Livereload plugin for Chrome
Enable it pressing its button in Chrome’s toolbar
Install gulp-modules:
npm install gulp gulp-plumber gulp-connect gulp-sass --save-dev
Create simple gulpfile (with livereload of *.scss files only) like
below.
run gulp
Example of gulpfile.js
'use strict';
var
gulp = require('gulp'),
plumber = require('gulp-plumber'),
connect = require('gulp-connect'),
sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('public/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch(['resources/assets/sass/*.scss'],
function (e) {
gulp.src(e.path)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'))
;
}
);
gulp.watch(['public/css/*.css',],
function (e) {
gulp.src(e.path)
.pipe(connect.reload())
;
}
);
});
gulp.task('server', ['watch'], function () {
connect.server({
root: 'public',
livereload: true
});
});
gulp.task('default', ['server']);
First install a plugin called laravel-elixir-livereload with
npm install --save-dev laravel-elixir-livereload
After that in your gulpfile.js write this:
var elixir = require('laravel-elixir');
require('laravel-elixir-livereload');
elixir( function(mix) {
mix.less('app.less')
.livereload();
});
Finally run
gulp watch
Documentation https://www.npmjs.com/package/laravel-elixir-livereload
You can use browsersync() without installing anything if you have Elixir 3.3 and Homestand
Run first: $ php artisan serve --host=0
On your gulpfile.js: mix.browserSync({proxy: 'localhost:8000'});
You can use the laravel-elixir-browsersync-official plugin.
Your gulpfile.js should look like this:
const elixir = require('laravel-elixir');
elixir((mix) => {
mix.less('app.less')
.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch')
.browserSync({
proxy: 'your-project.url'
})
});
This is the first time I use a Taskrunner but I've used Sass a lot and I really like the Sass syntax rather than the SCSS syntax. However, I want to use the Bourbon library in my new project and it's written with SCSS, so it doesn't compile for me if I don't have all of my CSS written in SCSS, since I only compile the files with the .sass ending. Is there a way to compile both or to use some other gulp plugin that does this? I've never had this problem using Compass, Codekit or the Sass compiler that's built into Jekyll. I attached my code and remember that I'm new to this, so feel free to point out if I've done some stupid decisions or if there's something that looks weird, I'd love to improve.
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
//Tasks regarding scripts--------------------------------------------------|
gulp.task('scripts', function(){
// Single entry point to browserify
gulp.src('vendor/scripts/main.js')
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.pipe(gulp.dest('./dist/js'))
console.log("This is reloaded");
});
//Tasks regarding styles----------------------------------------------------|
gulp.task('sass', function(){
gulp.src('vendor/styles/**/*.scss')
.pipe(sass({
outputStyle: 'nested',
onError: console.error.bind(console, 'Sass error:')
}))
.pipe(gulp.dest('./dist/css'))
});
//Live reload--------------------------------------------------------------------|
gulp.task('serve', ['scripts','sass'], function () {
gulp.watch([
'dist/**/*'
]).on('change', reload);
gulp.watch('vendor/styles/**/*.scss', ['sass']);
gulp.watch('vendor/scripts/*.js', ['scripts']);
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'dist'],
routes: {
'/bower_components': 'bower_components'
}
}
});
});
gulp-sass is based on libsass, the native C implementation of Sass, and libsass is well known to have issues with different syntaxes. I'd recommend using the plugin gulp-ruby-sass to fall back on the original Ruby implementation. The one you also use with Codekit, Compass, and so on. Be aware that gulp-ruby-sass has a different interface:
var sass = require('gulp-ruby-sass');
gulp.task('sass', function(){
return sass('vendor/styles/**/*.scss')
.pipe(gulp.dest('./dist/css'))
});
It's a lot slower that gulp-sass, but you won't come into such issues since there's still a huge difference between those implementations.
Btw: Good turn on your first Gulpfile! Just make sure to return streams in your subtasks so Gulp knows how to orchestrate them (just place a return statement before gulp.src)
According to
https://css-tricks.com/gulp-for-beginners/
You just need to change
/*.scss to *.+(scss|sass)
The plus + and parentheses () allows Gulp to match multiple patterns, with different patterns separated by the pipe | character. In this case, Gulp will match any file ending with .scss or .sass in the root folder.
This are my plugins:
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
haml = require('gulp-ruby-haml'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
coffee = require('gulp-coffee'),
gutil = require('gulp-util'),
slim = require("gulp-slim"),
del = require('del');
This worked for me:
// Styles
gulp.task('styles', function() {
return sass('src/styles/**/*.+(scss|sass)', { style: 'expanded' })
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
});
I've no doubt others have got this working... I just haven't quite worked out how right now.
Gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var handleErrors = require('../util/handleErrors');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function () {
return gulp.src('./frontend/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
'require':'susy'
}))
//.pipe(minifyCSS())
.pipe(sourcemaps.write('./app/www/css'))
.on('error', handleErrors)
.pipe(gulp.dest('./app/www/css'))
});
Sass
#import "susy";
Gulp Running
[23:58:08] Starting 'sass'...
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: file to import not found or unreadable: susy
Current dir: C:/var/www/rnli.hutber.com/frontend/sass/
I have installed susy#2.2.2 in the root along side the gulp file with the following: gem install susy
Current working setup with gulp-ruby-sass
I do however have it working, which confirms that susy is working via the gem installed with the following code:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var handleErrors = require('../util/handleErrors');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function () {
return gulp.src('./frontend/sass/style.scss')
.pipe(sass({
'sourcemapPath':'./app/www/css',
'require':'susy'
}))
//.pipe(minifyCSS())
.on('error', handleErrors)
.pipe(gulp.dest('./'))
});
NOTE The above code will not working using gulp-ruby-sass#1.0.0alpha' It will only work as I can tell withv0.7.1`
package.json
"devDependencies": {
"gulp": "~3.8.10",
"gulp-sass": "~1.3.2",
"gulp-ruby-sass": "~0.7.1",
"gulp-sourcemaps": "~1.3.0",
"susy":"~2.2.1"
}
How do I get susy working correctly and able to compile into css?
I've managed to get susy working with libsass (gulp-sass)
gulp-sass needs to know where to find files specified with an #import directive. You can try set the includesPath option in gulp-sass to point to your local copy of susy.
As I've installed susy with bower, I have something like this:
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src(config.src)
.pipe(sass({
includePaths: [
'bower_components/susy/sass'
]
}))
...
});
I had the same issue, but with Grunt instead of Gulp.
You could do is use the full path for susy.
First find out where your gems are installed (gem env, and look up for GEM PATHS; in my case they where in /Library/Ruby/Gems/2.0.0).
And then in your style.scss file instead of #import susy you do:
#import "/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy";
(Replace 2.2.2 for your version of susy, but if you are going to use libsass you should use something quite up to date; and you'll have to change that line when you upgrade...)
Not as elegant, but a small price to pay to use libsass.
Update: If you put includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass'] in your Gulp task you can get away with just "#import susy;", although you just moved the untidyness somewhere else.
It's probably neater to do it with Bower, as explained in another answer down here, and to have a local susy install for the project; but since I'm not using bower yet (shame on me), I just use a global susy copy for all my projects.