I am pretty new at Gulp (v.4.0.2), so I can't understand is there any kind of cache mechanism inside it (at least I can't find such a piece of information on Google). After running my "gulp" command styles.css file being created, but if I do changes in SASS file and the try to run the same command again I won't get a new generated file. I tried to delete styles.css file and run the command again - the file was generated, but with the old content. I can even see that the modification date of the generated file is being left from the old file.
My gulpfile.js:
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const del = require('del');
gulp.task('styles', () => {
return gulp.src('app/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cssnano())
.pipe(gulp.dest('app/css'));
});
gulp.task('clean', () => {
return del([
'app/css/styles.css',
]);
});
gulp.task('default', gulp.series(['clean', 'styles']));
Related
'use strict'
const gulp = require('gulp'),
sass = require('gulp-sass'),
sourceMap = require("gulp-sourcemaps");
gulp.task('sassToCss', ()=>{
return gulp.src("scss/application.scss")
.pipe(sourceMap.init())
.pipe(sass())
.pipe(sourceMap.write('./'))
.pipe(gulp.dest('css'));
});
gulp.task('watchFile', ()=>{
gulp.watch('scss/**/*.scss', ['sassToCss']);
});
when I use (gulp sassToCss) it always work.But when i start (gulp watchFile) and
edit some file in sass folder it's sometime work and sometime not. and which file i change it's give the error that this file can't find.enter image description here
So I use gulp quite often, mostly for scss/js compilation and minification.
I always use one entry scss file, with multiple imports, but when I add files to the entry file I need to rerun gulp (watch) to include those newly created files..
There must be a way to automatically include the new files?
Minified version of my gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('assets/sass/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('assets/sass/**/*.scss', ['sass']);
});
I have been working on how to automate the development process using gulp build system.
I am having some issue regarding revisioning of my stylesheets. I have used gulp-rev to generate file with their update revision number but it keeps on creating extra file on any of the changes inside the file which in result increasing my setup size.
gulpfile.js
var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var watch = require('gulp-watch');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var revAppend = require('gulp-rev-append');
//LESS
gulp.task('less', function() {
return gulp.src('assets/less/*.less')
.pipe(watchLess('assets/less/*.less'))
.pipe(less())
.pipe(autoprefixer({
browsers: ['> 0%'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(gulp.dest('assets/css/'))
.pipe(rev())
.pipe(gulp.dest('assets/css/'))
.pipe(revAppend())
.pipe(gulp.dest('assets/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('assets/'));
});
//Watch
gulp.task('watch', function(){
gulp.watch('assets/less/*.less', ['less']);
})
//Default
gulp.task('default', ['watch']);
I need help in creating the latest file with the update changes and remove the previous file from the file directory or something which will give me only on file with the latest update/changes in it.
I have also used several other rev related plugin but din't find the correct way to config it
Well, you have four pipes with destination locations.
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('assets/'));
Three of them with the same destination. Expect to have three copies of all the files in the pipe at different stages. With gulp-rev you need an extra pipe for the manifest, but that still leaves us with 2 instead of 4.
Try:
//LESS
gulp.task('less', function() {
return gulp.src('assets/less/*.less')
.pipe(watchLess('assets/less/*.less'))
.pipe(less())
.pipe(autoprefixer({
browsers: ['> 0%'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(rev())
.pipe(revAppend())
.pipe(gulp.dest('assets/css'))
// WARNING!!! Put the manifest after all the file pipes
.pipe(rev.manifest())
.pipe(gulp.dest('assets/'));
});
Here is post on re-visioning in case you want to revision your package and leave file revision responsibilities to your source control, or build server.
I have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.
What is the proper way to use gulp-watch plugin?
...
var watch = require('gulp-watch');
function styles() {
return gulp.src('app/styles/*.less')
.pipe(watch('app/styles/*.less'))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulp.dest('build'));
}
gulp.task('styles', styles);
I don't see any results when run gulp styles.
In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
Then type gulp watch and hit enter.
If your gulpfile.js is configured properly (see example below) than you will see output like this:
[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms
Every time you save your file you'll see new output here instantly.
Here is an example of a functional gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
watchLess = require('gulp-watch-less'),
pug = require('gulp-pug'),
less = require('gulp-less'),
minifyCSS = require('gulp-csso'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('watch', function () {
gulp.watch('source/less/*.less', ['css']);
});
gulp.task('html', function(){
return gulp.src('source/html/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function(){
return gulp.src('source/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
});
gulp.task('default', [ 'html', 'js', 'css', 'watch']);
Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.
gulp.task('less', function() {
gulp.src('app/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('watch', function() {
gulp.watch(['app/styles/*.less'], ['less'])
});
Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.
This is working code I hope it helps the lurkers.
Then (for version 4+) you need to do something like this:
var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
var uglify = require('gulp-uglify'); // and here as well
gulp.task('scripts', function(done) {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('watch', function() {
gulp.watch('./src/js/*.js',gulp.series(['scripts']))
});
** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))