So I've got a problem with my gulp.watch task. So the short version of my gulpfile.js is:
var gulp = require('gulp'),
usemin = require('gulp-usemin'),
wrap = require('gulp-wrap'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
minifyCss = require('gulp-minify-css'),
minifyJs = require('gulp-uglify'),
concat = require('gulp-concat'),
less = require('gulp-less'),
rename = require('gulp-rename'),
minifyHTML = require('gulp-minify-html'),
rimraf = require('gulp-rimraf'),
live = require('gulp-livereload'),
strip = require('gulp-strip-debug'),
gulpif = require('gulp-if');
var paths = {styles: 'public-src/less/*.*'};
gulp.task('delete-css', function (cb) {
return gulp.src(paths.css_delete)
.pipe(rimraf());
});
gulp.task('custom-less', ['delete-css'], function (cb) {
return gulp.src(paths.styles)
.pipe(less())
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', function () {
gulp.watch([paths.styles],['custom-less']);
});
Also I've got a build task which contains custom-less task, which actually works. Here it is
gulp.task('build-custom', ['custom-less']);
gulp.task('build', ['build-custom']);
So when i ran gulp build css is concatenated to one file. When I edit my css in terminal I see that task custom-less is starting and finished, but the css file does not get updated. I cant seem to understand why the same task works when you run it using gulp build but when you watch it, it does not change...
Hope anyone has ideas?
Related
I am completely new to gulp, and while I have managed to implement some cool tasks wit gulp, I am having trouble implementing a task that will clear files matching specic pattern from specified directory.
In this particular case I would like to remove all files matching pattern '*.min.css' from css dir.
Here is a piece of code that deletes all files including directory, which is wrong. I want to remove only min.css files
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
del = require('del');
var paths = {
webroot: "./wwwroot/"
};
paths.cssMinOutputPath = paths.webroot + "css";
gulp.task("clean:min.css", function (cb) {
del([paths.cssMinOutputPath, "*.min.css"], cb);
});
I was keep playing around, and magically I have resolved the issue. It makes sense though. Here is the snippet:
gulp.task("clean:min.css", function (cb) {
del([paths.cssMinOutputPath + "/*.min.css"], cb);
});
I've got the following code to concatenate and minify my .css files :
var gulp = require('gulp'),
concatCSS = require('gulp-concat-css'),
minifyCSS = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
autoprefixer = require('gulp-autoprefixer');
//Concat CSS
gulp.task('concat', function () {
return gulp.src('css/*.css')
.pipe(concatCSS('css/bundle.css'))
.pipe(rename('bundle.min.css'))
.pipe(minifyCSS('bundle.min.css'))
.pipe(gulp.dest('out/'));
});
//Watch HTML and reload
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./app"
}
});
browserSync.watch("app/*.html").on("change", reload);
});
//Default
gulp.task('default', ['serve', 'concat']);
Although Terminal shows no errors the code for concatenation and minifying is not working.
What should I fix to solve the issue?
The structure of my project:
UPD!
In my case there were some syntactic mistakes in .css files. Works well after correcting them and removing minifyCSS since it's no longer supported.
I wanna do this thing:
I have a folder with many js files. When I save one of them, I want to save the minified file in other folder.
I got it partially, because my script watch many files and when I change one, all files are copied and minified to the destination folder.
I discover recently that gulp.run is not used anymore.
If someone could help me, I'll be greatful.
I was trying this way:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var files_dev = "./_sys/js/private/*.js";
var path_prod = "./_sys/js/public/";
gulp.task('dist-file', function(file) {
gulp.src(file)
.pipe(uglify())
.pipe(gulp.dest(path_prod));
});
gulp.task('default', function() {
gulp.watch(files_dev).on("change", function(file) {
gulp.run('dist-file');
});
dist-file doen't need to be a gulp task, you can make that a function which you can pass the file or glob to process. Also watch is part of gulp now so you shouldn't need gulp-watch.
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var files_dev = "./_sys/js/private/*.js";
var path_prod = "./_sys/js/public/";
function uglifyFile (file) {
gulp.src([file])
.pipe(uglify())
.pipe(gulp.dest(path_prod));
}
gulp.task('watch-test', function() {
gulp.watch(files_dev).on("change", function (event) {
uglifyFile(event.path);
});
});
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.
I'm trying to execute a shell command at the end of a series of gulp tasks. I noticed that the changes written to the project's files aren't being written before the shell command picks up some of the files and copies them elsewhere. I'm using gulp-shell to execute my shell commands.
I found that if I executed a 'ls' command before my file copy, there's enough of a delay that the files are all written before I try to copy them. Is there a cleaner way to do this?
Here's the gruntfile:
var gulp = require('gulp');
var shell = require('gulp-shell');
var jshint = require('gulp-jshint');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
var minifyHTML = require('gulp-minify-html');
var concat = require('gulp-concat');
//Uncomment out this line before going to production
//var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
// JS hint task
gulp.task('jshint', function() {
gulp.src('./code/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './code/img/**/*', imgDst = './www/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './code/*.html', htmlDst = './www';
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./code/js/index.js', './code/js/*.js'])
.pipe(concat('script.js'))
//Uncomment out this line before going to production
//.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./www/'));
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['./code/css/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./www/'));
});
gulp.task('prepare', shell.task(['ls', 'cordova prepare']));
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'prepare'], function() {
});
It's the prepare task - when it runs, the other files haven't finished executing yet.
It seems that I can set a dependent task that must finish before my prepare:
gulp.task('prepare', [styles], shell.task(['ls', 'cordova prepare']));
I haven't tested it, but I expect this will work?
Try gulp-run-sequence Gulp tasks are Async and this enables them to fire synchronously. Should solve your issue.