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);
});
Related
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?
The code bellow doesn't merge correctly rev-manifest.json file.
I loop several JS tasks and just one is merged, although hash files are being created and stored correctly.
I already tried a ton of things, I checked gulp-rev and some users seam to have similar problems. Some of them are creating several manifest files and proceed with the actual merge at the end. I would like to discard this solutions since it's slow and ugly.
If I comment the concat(...) line the manifest file registers all the JS tasks.
Is this a BUG or am I missing something here?
gulp 3.9.1
gulp-concat 2.6.0
gulp-rev 7.0.0
var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rev = require('gulp-rev');
var jsFiles = {
task1: [
'./path/file1.js'
],
task2: [
'./path/file2.js',
'./path/file2.js'
]
};
function jsTask(key) {
gulp.task(key, function() {
gulp.src(jsFiles[key])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
// IT WORKS WHEN I COMMENT THIS LINE
.pipe(concat(key + '.min.js'))
.pipe(rev())
.pipe(gulp.dest('./public/js'))
.pipe(rev.manifest({merge:true }))
.pipe(gulp.dest('.'));
});
}
gulp.task('less', function() {
return gulp.src(['./path/less/*.less'])
.pipe(less({errLogToConsole: true}))
.pipe(minifycss())
.pipe(rev())
.pipe(gulp.dest('./path/public/css'))
.pipe(rev.manifest({merge:true }))
.pipe(gulp.dest('.'));
});
for (var key in jsFiles) {
jsTask(key);
}
var defaultTasks = ['less'];
for (var key in jsFiles) {
defaultTasks.push(key);
}
gulp.task('default', defaultTasks);
You can pass the name of the manifest file you want to create(different for each gulp task) to manifest function of the gulp-rev-all module like below
gulp.task('productionizeCss', function () {
return gulp
.src(['dist/prod/**/*.css'])
.pipe(revAll.revision({
fileNameManifest: 'css-manifest.json'
}))
.pipe(gulp.dest('dist/prod/'))
.pipe(revAll.manifestFile())
.pipe(gulp.dest('dist/prod/'));
});
gulp.task('productionizeJS', function () {
return gulp
.src(['dist/prod/**/*.js'])
.pipe(revAll.revision({
fileNameManifest: 'js-manifest.json'
}))
.pipe(gulp.dest('dist/prod/'))
.pipe(revAll.manifestFile())
.pipe(gulp.dest('dist/prod/'));
});
Here, I have two gulp tasks, one to revise all JS and one for CSS.So, I have created two manifest files css-manifest.json, js-manifest.json.
Then I specified both the manifest files in src of the rev-replace module as shown below:
gulp.task('revReplaceIndexHtml', function () {
var manifest = gulp.src(["dist/prod/js-manifest.json", 'dist/prod/css-manifest.json']);
return gulp.src('dist/dev/referralswebui/index.html')
.pipe(revReplace({ manifest: manifest, replaceInExtensions: ['.html']}))
.pipe(gulp.dest('dist/prod/referralswebui/'));
});
I would suggest using gulp-useref instead of gulp-concat.
Given your setup, I think key references a glob path, or at least I hope so. Otherwise you are trying to concatenate a single file, or no files which may crash the concat plug-in. Emphasis on may.
Also, since you are using gulp-rev, I suggest using gulp-rev-replace which will automatically update your index references to the reved files.
Edit
Sometimes rev.manifest behaves in ways that I would describe as buggy. Just to exhaust all possibilities remove the merge option for the manifest and run concat. Or run concat and remove manifest altogether.
I have a gulp task which minifies CSS files and concatenates them to one file:
gulp.task('minify-css', function() {
'use strict';
var pathsToMinifyAndConcat = [
'css/index.css'
];
var pathsToConcatOnly = [
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
];
var minifyFiles = require('gulp-cssnano');
var concatAllFilesToOneFile = require('gulp-concat');
return gulp.src(
[]
.concat(pathsToMinifyAndConcat)
.concat(pathsToConcatOnly)
)
.pipe(minifyFiles())
.pipe(concatAllFilesToOneFile('application.min.css'))
.pipe(gulp.dest('dist'));
});
But, if some files are already minified (like font-awesome.min.css for example), it should not be minified again - it should be only concatenated, and it should be omitted from the minifying process. Is there a way to do it without hacky solutions (I don't want to use solutions which I can't fully understand - and I'm pretty new to gulp) with preserved files order? I found a plugin to add src files in any point in the pipeline: gulp-add-src, but it seems to be inactive for a while.
There is more than one way of doing what you want. I will give you two examples.
First:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var merge = require('merge-stream');
gulp.task('minify-css', function() {
var pathsToMinify = [
'css/style1.css'
];
var pathsToConcat = [
'css/style2.css'
];
var minStream = gulp.src(pathsToMinify)
.pipe(minify());
var concatStream = gulp.src(pathsToConcat)
return merge(minStream, concatStream)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
In this example it is created two different streams. One is minified and the other is not. In the end these two streams are merged, concatenated and then the files are written in the disk.
Second:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var gulpFilter = require('gulp-filter');
gulp.task('minify-css', function() {
var paths = [
'css/style1.css',
'css/style2.css'
];
// Files to minify.
var filter = gulpFilter([
'style1.css'
],
{
restore: true
});
return gulp.src(paths)
.pipe(filter)
.pipe(minify())
.pipe(filter.restore)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
In this example, just one stream is created but the vinyl file objects are filtered by gulp-filter and just the filtered ones are minified. Then, all the files originally in the pipeline are restored with filter.restore and concatenated.
There are other possibilities, like creating two different tasks where one just minifies and the other concatenates, but with this approach you would need to write the minified files temporarily in the disk.
Late to the party, as usual, but another option would be to conditionally minify files using gulp-if. Something like this should work:
const gulp = require('gulp'),
gulpif = require('gulp-if'),
concat = require('gulp-concat'),
minifyCss = require('gulp-cssnano');
gulp.task('css', function () {
gulp.src([
'css/index.css',
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
])
.pipe(gulpif(file => !(file.path.includes('.min.css')), minifyCss()))
.pipe(concat('app.min.css'))
.pipe(gulp.dest('dist'));
});
Hope this helps!
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.