I am following a tutorial on react that requires gilp. The gulpfile.js used in the tutorial is based on an older version of Gulp. I am trying to convert it to V4 but am not having much luck.
I want to ensure the code is correct and am finding that the changes that I add in make parts work, but I'm sure there is a better way to convert it. This is the original code provided in the tutorial:
'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-changed');
///////////////
// - 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']);
All I am looking for is the correct way to convert the above into a gulp v4 version
I was able to figure it out. However, I am not sure it is the most optimized code:
'use strict';
//dependencies
const gulp = require('gulp');
const sass = require('gulp-sass');
const minifyCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const changed = require('gulp-changed');
///////////////
// - SCSS/CSS
///////////////
// Compile SCSS
function scss() {
return gulp.src('./src/Assets/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed('./src/Assets/css'))
.pipe(gulp.dest('./src/Assets/css'))
}
// Watch files
function watchFiles() {
gulp.watch('./src/Assets/scss/**/*.scss', scss);
}
exports.default = watchFiles;
Related
While running gulp sass
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: './assets/sass/*.scss'
};
/* Sass task */
gulp.task('sass', function () {
gulp.src('assets/scss/main.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss'].concat(neat)
}))
.pipe(gulp.dest('assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
I get error " ReferenceError: neat is not defined". Since "neat" is not defined variable. It should be replaced.
Any help is much appreciated.
includePaths: ['scss'].concat(neat)
where did you defined neat variable ??
var neat = require('node-neat').includePaths;
and then
includePaths: ['styles'].concat(neat)
maybe
var neat = require('node-neat').includePaths;
and then
includePaths: ['styles'].concat(neat)
??
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('path/to/input.scss')
.pipe(sass({
// includePaths: require('node-neat').with('other/path', 'another/path')
// - or -
includePaths: require('node-neat').includePaths
}))
.pipe(gulp.dest('path/to/output.css'));
});
the doc on https://github.com/sass/node-sass
say
includePaths
Type: Array<String>
Default: []
An array of paths that LibSass can look in to attempt to resolve your
#import declarations. When using data, it is recommended that you use
this.
so this whould work ??
var path = require('path');
gulp.task('sass', function () {
gulp.src('assets/scss/main.scss')
.pipe(plumber())
.pipe(sass({
includePaths: [path.resolve('./assets/sass')]
}))
.pipe(gulp.dest('assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
I have the following problem and don't know whats going wrong with my gulpfile. Everything is working fine and my sass files are being compiled and the browser refreshed when changing something.
But if I add a new partial file and import it into my _base.scss, browsersync is only recognizing the change in that partial and is not compiling the whole sass file & reloading the browser. Does anyone know how to solve this problem? I could not figure out a good solution.
Thanks!
Here's my gulpfile.js
/*=============================================>>>>>
= gulpfile - all the gulptasks are here =
===============================================>>>>>*/
/*----------- variables -----------*/
// gulp
var gulp = require('gulp');
// css stuff
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var cssnext = require('postcss-cssnext');
var lost = require('lost');
var csswring = require('csswring');
// javascript
var babel = require('gulp-babel');
// jade
var jade = require('gulp-jade-php');
// browser sync
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/*----------- tasks -----------*/
// style task
gulp.task('styles', function(){
var processors = [
autoprefixer,
cssnext,
lost,
csswring
];
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/'))
.pipe(reload({stream: true}));
;
});
// javascript task
gulp.task('javascript', function(){
return gulp.src('./js/*.js')
.pipe(babel())
.pipe(gulp.dest('./js/dist/'))
.pipe(reload({stream: true}));
});
// jade task
gulp.task('jade', function(){
return gulp.src('./jade/*.jade')
.pipe(jade())
.pipe(gulp.dest('./templates/'))
.pipe(reload({stream: true}));
});
// browser sync
gulp.task('browserSync', function(){
var files = [
'./scss/**/*.scss',
'./css/style.css',
'./*.php',
'./templates/**/*.php',
'./js/*js',
'./jade/*jade'
];
browserSync.init(
files, {
proxy : 'localhost:8888/jobs/heisaplan/',
});
});
// watching the files for changes
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('./js/*.js', ['javascript']).on('change', browserSync.reload);
gulp.watch('./jade/**/*.jade', ['jade']).on('change', browserSync.reload);
gulp.watch('./templates/**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
// default gulp task
gulp.task('default', ['watch', 'browserSync', 'styles', 'javascript', 'jade']);
I'm trying to setup a Gulp task that converts Sass into CSS and then minifies it.
Here's my current gulpfile.js
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass','minify-css']);
});
I run gulp sass:watch and I expect it to convert main.scss into main.css which it does and then I see that it also runs minify-css, but it doesn't actually minify it.
If I run gulp minify-css, it works perfectly. Can someone please tell me how this needs to be adjusted so gulp.watch runs both tasks, one after another?
Thank you
Looks like I got this work, by removing the additional task and combining the css minify into the sass portion.
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('./css'));
});
// gulp.task('minify-css', function() {
// return gulp.src('css/*.css')
// .pipe(minifyCss({compatibility: 'ie8'}))
// .pipe(gulp.dest('css'));
// });
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass']);
});
When I'm changing css file and then open "bundle.min.css", there are no changes applied, no errors are displayed in the console, what I'm doing wrong.
Here is my gulpfile:
var gulp = require('gulp'),
concatCss = require('gulp-concat-css'),
rename = require("gulp-rename"),
watch = require('gulp-watch'),
notify = require("gulp-notify"),
autoprefixer = require('gulp-autoprefixer'),
minifyCss = require('gulp-minify-css');
gulp.task('default', function() {
return gulp.src('*.css')
.pipe(concatCss("bundle.css"))
.pipe(minifyCss(''))
.pipe(rename("bundle.min.css"))
.pipe(gulp.dest('css'))
.pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false}))
.pipe(notify("Gulp Done!"));
});
gulp.task('watch', function () {
watch('*.css', ['default'])
});
I'm trying to concatenate my JS files and run them through Babel for a new project, but instead of overwriting the destination file on each task run, my gulpfile only appends changes to the file. So my destination file ends up looking like this:
console.log('hello');
//# sourceMappingURL=app.js.map
console.log('goodbye');
//# sourceMappingURL=app.js.map
What am I missing? Below is my gulpfile.
Thanks in advance.
var gulp = require('gulp');
var sourcemaps = require("gulp-sourcemaps");
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('js', function(){
return gulp.src("./app/js/*.js")
.pipe(sourcemaps.init())
.pipe(concat("app.js"))
.pipe(babel())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./app/js/"));
});
gulp.task('js-reload', ['js'], reload);
gulp.task('serve', ['js'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("./app/js/*.js").on('change', ['js-reload']);
gulp.watch("./app/*.html").on('change', reload);
});
gulp.task('default', ['js', 'serve']);
You're reading and writing to the same destination directory. Therefore the file app.js is first read, some stuff is added to it, and then the result is written to app.js, causing this appending behaviour. You should output to a different directory than you are reading from.