How to write an advanced laravel elixir gulpfile - laravel-5

I work for the first time with Laravel. I'm used to work with gulp and I usually use a manual method in the gulpfile. I'd want tranform it with laravel-elixir but i'm lost with the following problematics:
Several files locations and types (css, less).
I'd like to use the .env (APP_ENV) variable if it's possible
Use the watcher
Exemple of code:
// Requires
var gulp = require('gulp');
// Include plugins
var less = require('gulp-less');
var util = require('gulp-util');
var gulpif = require('gulp-if');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var watch = require('gulp-watch');
var rev = require('gulp-rev');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var elixir = require('laravel-elixir');
// Styles LESS
gulp.task('styles', function () {
return gulp.src([
'vendor/bower_components/one/less/one.less',
'vendor/bower_components/two/css/two.css',
'resources/assets/less/app.less'
])
.pipe(gulpif(/[.]less/, less()))
.pipe(autoprefixer())
.pipe(concat('style.css'))
.pipe(gulpif(elixir.config.production == true, minifycss({keepBreaks:false,keepSpecialComments:0})))
.pipe(rev())
.pipe(gulp.dest('public/css/'));
});
gulp.task('serve', function() {
browserSync({
proxy: {
target: "local.dev"
},
open: false
});
gulp.watch(['resources/assets/less/**/*.less'], ['styles']).on('change', reload);
});
gulp.task('default', ['styles', 'serve']);
How can I translate this file with Elixir. I've

Related

Gulp with browserify, sass and watch both files

I have problem. I create my own gulpfile and all works fine but i wanna add a browserify to use modules, but i want to watch this. Can you be so nice and watch at my gulpfile and said if i can add somewhere in serve task to watch also browserify? Or maybe you have better solution for this problem?
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlReplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');
var config = {
dist:'dist/',
src:'src/',
htmlIn:'src/*.html',
cssIn:'src/css/**/*.css',
jsIn:'src/script/**/*.js',
scssIn:'src/scss/**/*.scss',
cssOut:'dist/css',
jsOut:'dist/script',
scssOut:'src/css',
}
gulp.task('reload',function(){
browserSync.reload();
});
gulp.task('serve', ['sass','scripts'], function(){
browserSync({
server:config.src,
port:5050
});
gulp.watch([config.htmlIn, config.jsIn], ['reload']);
gulp.watch(config.scssIn, ['sass']);
})
gulp.task('sass', function(){
return gulp.src(config.scssIn)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers:['last 3 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
})
gulp.task('mincss',function(){
return gulp.src(config.cssIn)
.pipe(cleanCSS())
.pipe(gulp.dest(config.cssOut))
})
gulp.task('minjs',function(){
return gulp.src(config.jsIn)
.pipe(uglify())
.pipe(gulp.dest(config.jsOut));
})
gulp.task('default', ['serve']);
Add another gulp watch for your browserify.
gulp.watch(config.jsIn, ['browserify']);

Browsersync stream not working

Browsersync stream is not working for me.
I've copied example from official documentation and it won't working. Reloading for html and js files working fine. Only sass streaming wouldn't work. I've read all the issues on github and can't find an answer for my question.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
// Development Tasks
// -----------------
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: {
baseDir: "./app",
index: 'index.html'
}
});
gulp.watch('app/styles/*.scss', ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
gulp.watch('app/pages/*.html').on('change', browserSync.reload);
gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('app/styles/*.scss'). // Gets all files ending with .scss in app/scss and children dirs
pipe(sass().on('error', sass.logError)). // Passes it through a gulp-sass, log errors to console
pipe(gulp.dest('app/css')). // Outputs it in the css folder
pipe(browserSync.stream());
})
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence([
'sass', 'serve'
], callback)
})
gulp.task('build', function(callback) {
runSequence('clean:dist', 'sass', [
'useref', 'images', 'fonts'
], callback)
})
I would make three quick changes to see if they help. First
const browserSync = require("browser-sync").create();
Note the create() at the end, you need that. Second, simplify this:
gulp.task('default', function(callback) {
runSequence([
'sass', 'serve'
], callback)
})
to:
gulp.task('default', ['serve']);
Your 'serve' task calls the 'sass' task first anyway so you don't need the renSequence stuff. Finally, change:
pipe(browserSync.stream());
to:
pipe(browserSync.reload({stream:true}));
I would also make this change:
gulp.watch('app/js/**/*.js').on('change', browserSync.reload(stream:true}));

Why Gulp doesn't create css file?

I have a problem because I've created task in gulpfiles.js but when I'm creating my file: .scss and then I write command gulp in bash. I have no errors, but there is no file in css folder. In my bash this code apeearing:
C:\Users\DOM\Desktop\react\my-react-project>gulp
[16:33:25] Using gulpfile ~\Desktop\react\my-react-project\gulpfile.js
[16:33:25] Starting 'watch_scss'...
[16:33:25] Finished 'watch_scss' after 13 ms
[16:33:25] Starting 'default'...
[16:33:25] Finished 'default' after 12 μs
This is my code from gulpfile.js :
'use strict';
//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-change');
/////////////////////////////////
// - SCSS/CSS
////////////////////////////////
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
//Compile SCSS
gulp.task('compile_scss',function () {
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({suffix:'.min'}))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
//Detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, ['compile_scss']);
});
//Run tasks
gulp.task('default', ['watch_scss']);
I can't find where is my mistake.
In this line
var changed = require('**gulp-change**');
you should require gulp-changed,so this should work fine.
var changed = require('**gulp-changed**');
If you find this answer helpful please give thumbs up :)
gulp.watch would run your task 'compile_scss' only when you change file in dir defined in SCSS_SRC. Until gulp does not see any modifications in files there - gulp.watch would do nothing. Try gulp.task('default', ['compile_scss', 'watch_scss']);. And I recommend you to use gulp-syncplugin to make tasks 'compile_scss', 'watch_scss' run one after another, because if you modify your default task as I've recommended - these 2 tasks would run in parallel
I've changed previous code to this code:
var gulp = require('gulp');
//var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-clean-css');
var SRC = './src/Assets/scss/**/*.scss';
var DEST = './src/Assets/css/';
gulp.task('styles', function() {
gulp.src(SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest(DEST));
});
//Watch task
gulp.task('default',function() {
gulp.watch(SRC,['styles']);
});
and everything works but I have no idea why.

Gulp does not compile Sass to CSS when there is an error. How do I use plumber?

Normally Gulp-Sass compiles Sass to CSS perfectly until there is an error in a Sass file(for eg: h1{font-size:}).
I have used Gulp Plumber to prevent the pipes from breaking but I could not figure out the way to properly use it. In the above example, even if I fix the error and make it h1{font-size:32px;}, CSS is not generated.
ERROR
Plumber found unhandled error:
error in plugin 'gulp-sass'
Message:
app\scss\pages\_landing.scss
Error: style declaration must contain a value
...
gulpfile
// Requires Gulp
var gulp = require('gulp');
// Require Gulp Sass
var sass = require('gulp-sass');
// Require Browser Sync
var browserSync = require('browser-sync').create();
// For minificatin
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
// Require imagemin
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Require del
var del = require('del');
// Require runsequence
var runSequence = require('run-sequence');
// Require Sourcemaps
var sourcemaps = require('gulp-sourcemaps');
// Require Plumber
var plumber = require('gulp-plumber');
// Prepocessing Sass
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass()) // Using gulp-sass
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Spinning up a Browser Sync Server
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
// Watching for changes
gulp.task('watch', ['sass', 'browserSync'], function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
})
// Gulp Default Function
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
})
// Minification
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
// Image Optimization
gulp.task('images', function(){
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg|JPG)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
});
// Copy Fonts
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
// Cleaning up generated files
gulp.task('clean:dist', function() {
return del.sync('dist');
})
// Build Production website
gulp.task('build', function(callback) {
runSequence(
'clean:dist',
'sass',
['useref', 'images', 'fonts'],
callback
)
})

Using PostCSS with Sass in Gulp to run font-awesome

Hi guys am trying to use font-awesome in my postcss layout but it seems not to work. So i tried installing sass with posts to see if it will work but i do not know how to go about it.
I already installed npm gulp for sass
This is my gulp file configuration
var gulp = require('gulp'),
gutil = require('gulp-util'),
webserver = require('gulp-webserver'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
precss = require('precss'),
cssnano = require('cssnano'),
animation = require('postcss-animation'),
sass = require('gulp-sass'),
source = 'process/css/',
dest = 'builds/postcss/';
gulp.task('html', function() {
gulp.src(dest + '*.html');
});
gulp.task('css', function() {
gulp.src(source + 'style.css')
.pipe(postcss([
precss(),
animation(),
autoprefixer(),
cssnano()
]))
.on('error', gutil.log)
.pipe(gulp.dest(dest + 'css'));
});
gulp.task('watch', function() {
gulp.watch(source + '**/*.css', ['css']);
gulp.watch(dest + '**/*.html', ['html']);
});
gulp.task('webserver', function() {
gulp.src(dest)
.pipe(webserver({
livereload: true,
open: true
}));
});
gulp.task('default', ['html', 'css', 'webserver','watch']);
And am trying to add this sass configuration
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var processors = [
autoprefixer,
cssnano
];
return gulp.src('./src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
Use this https://github.com/jonathantneal/precss or https://github.com/postcss/postcss-scss
example
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var processors = [
require('postcss-font-awesome')
require('precss')
];
gulp.task('css', function () {
gulp.src(['css/style.pcss'])
.pipe(postcss(processors))
.pipe(gulp.dest('css'));
});

Resources