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']);
});
Related
I have simple starter app, I created gulpfile.js file with content below,
let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');
// Task to minify css using package cleanCSs
gulp.task('minify-css', () => {
// Folder with files to minify
return gulp.src('src/assets/styles/*.css')
//The method pipe() allow you to chain multiple tasks together
//I execute the task to minify the files
.pipe(cleanCSS())
//I define the destination of the minified files with the method dest
.pipe(gulp.dest('src/assets/dist'));
});
//We create a 'default' task that will run when we run `gulp` in the project
gulp.task('default', function() {
// We use `gulp.watch` for Gulp to expect changes in the files to run again
gulp.watch('./src/assets/styles/*.css', function(evt) {
gulp.task('minify-css');
});
});
if I run gulp minify-css it works expected, but I need it to minify on file change
But all its do log a message in cmd windows like 'Starting ...'
I don't even know what does it mean...
package.json:
..
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0"
I think you need to add return when running task minify-css, so that system knows when previous task was completed.
gulp.task('default', function() {
// We use `gulp.watch` for Gulp to expect changes in the files to run again
gulp.watch('./src/assets/styles/*.css', function(evt) {
return gulp.task('minify-css');
});
});
I am scratching my head around but can't seem to figure out whats wrong with the following gulpfile which simply watch and compile less file.
This simply won't watch less changes, I have tried all gulp, gulp watch. I have to manually run gulp after each change to compile them. Is there something wrong that causing watch to not work as expected?
Gulp Version
CLI version 1.4.0
Local version 3.9.1
NPM 4.1.2
Node v7.7.2
var gulp = require('gulp');
var less = require('gulp-less');
// gulp compile paths
var paths = {
dist: 'assets/dist'
};
gulp.task('css', function() {
return gulp.src('assets/less/styles.less')
.pipe(less({
compress: true
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('watch', function() {
gulp.watch('assets/less/*.less', ['css']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']);
Make sure you have correct path to the .less files also you need to add bowersync.reload for it to work.
gulp.task('watch', function () {
gulp.watch('assets/less/*.less', ['css']);
// init server
browserSync.init({
server: {
proxy: "local.build",
baseDir: appPath.root
}
});
gulp.watch([appPath.root + '**'], browserSync.reload);
});
gulp.task('default', ['watch']);
I cant create output.css file in root directory via gulp .. I want output compressed one file with stylesheet, but the gulp doesnt work them.
I have this structure
- bower_components
- bootstrap
- sass
- custom.scss
- output.css
my gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scss', function () {
return gulp.src('bower_components/bootstrap/scss/_custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('output.css'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('bower_components/bootstrap/scss/_custom.scss', ['scss']);
});
gulp.task('default', ['watch']);
You forgot to include the 'scss' task in your default task.
gulp.task('default', ['scss', 'watch']);
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.
I am trying to switch from gulp-sass to gulp-scss however surprisinly its not working for me. I have checkedin my code in following Git Hub.
https://github.com/dilipkumar2k6/gulp-sass
"gulp sass" is working because its using gulp-sass module. However "gulp scss" is not working because its using "gulp-scss". Following is my gulp task.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var scss = require("gulp-scss");
gulp.task('sass', function () {
gulp.src('./src/application/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/sass'));
});
gulp.task("scss", function () {
gulp.src(
"./src/application/**/*.scss"
).pipe(scss(
{"bundleExec": true}
)).pipe(gulp.dest('./dist/scss'));
});
Is there any specific reason why you have to use gulp-scss?
You don't have to use gulp-scss module in order to compile your .scss files.
gulp-scss is a bit unpopular, you should stick to gulp-sass module and in your code specify ".pipe(sass())" - it will compile either .scss or .sass files down to .css files