Im trying to minify JS files with Gulp, but what is happening is that it copies all the original files im trying to minify to the destination folder /minify whereas I want there to be only the minified files with the extension -min.js.
var gulp = require('gulp');
var minify = require('gulp-minify');
var stripDebug = require('gulp-strip-debug')
var strip = require('gulp-strip-comments')
gulp.task('min-js', function() {
return gulp.src('./**/*.js', '!./node_modules', '!./*-min.js')
.pipe(minify({
ignoreFiles: ['gulpfile.js', './node_modules']
}))
.pipe(stripDebug())
.pipe(gulp.dest('./minify'))
});
gulp.task('watch', function(){
gulp.watch('lib/scripts/*.js', ['min-js']);
});
gulp.task('default', gulp.series('min-js', 'watch'));
Related
I have a Gulp task to concatenate JavaScript source files into a single one and minify it:
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile)) // Concat files
.pipe(uglify({})) // Minify
.pipe(gulp.dest(dest)); // Save final file to dest
});
If one of the JavaScript file has a syntactic error, the uglify plugin raise an error. I can check the error, listening to it:
var gutil = require('gulp-util');
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile))
.pipe(uglify({}))
.on('error', gutil.log) // Log errors
.pipe(gulp.dest(dest));
});
The error, for example could be:
...
JS_Parse_Error {
message: 'SyntaxError: Unexpected token punc «,», expected punc «:»',
filename: 'final.js',
line: 2204,
col: 25,
pos: 89101,
stack: 'Error\n at new JS_Parse_Error (eva...
Unfortunately I am not able to check the file final.js at line 2204 to see the error ad fix it in the original file. I am not able to do that because the file has not been written to the file system yet.
Sure I can write the file to the disk before calling uglify and inspect it later:
var gutil = require('gulp-util');
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile))
.pipe(gulp.dest(dest)) // Save file to disk before uglify it
.pipe(uglify({}))
.on('error', gutil.log)
.pipe(gulp.dest(dest));
});
But in this way I write the same file 2 times and I don't like it (for example, is not very good for performance).
My question is:
Is it possible to write the file to disk only in an error occurs on uglify?
Something like:
var gutil = require('gulp-util');
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile))
.pipe(gulp.dest(dest))
.pipe(uglify({}))
.on('error', function(err) {
// ... save content of "dest" file somewhere...
})
.pipe(gulp.dest(dest));
});
Thank you.
I can't use gulp-browserify. My input file is _/components/js/script.js (this has require('jquery'). I want it to output to _/js/script.js. What's wrong with my configuration? I get a path error.
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
browserify= require('browserify');
gulp.task('watch', function(){
gulp.watch('_/components/sass/*.scss', ['sass']);
});
gulp.task('browserify', function(){
var b = browserify({entries: './_/components/js/script.js', debug: true});
return b.bundle()
.pipe(gulp.dest('./js/'));
});
gulp.task('default', ['sass', 'browserify', 'watch']);
You can't pipe browserify bundle stream like that to a gulp.dest stream. It's expecting a vinyl stream. You could use vinyl-source-stream to transform it. This is very common:
var gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream');
var files = ['./js/admin.js', './js/login.js', './js/main.js']
gulp.task('browserify', function(){
var b = browserify(files);
b.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('public'))
});
I've got a simple gulp task that compiles a .jade file to an .html file:
var gulp = require('gulp'),
jade = require('gulp-jade');
gulp.task('jade', function() {
return gulp.src('src/templates/**/*.jade')
.pipe(jade()) // pip to jade plugin
.pipe(gulp.dest('public')); // tell gulp our output folder
});
Issue
/src/templates/page.jade is compiled to HTML at the destination /public/page.html
How would I get it so it would compile /src/templates/page.jade to /public/page/index.html.
I.e. every new jade file in templates gets compiled to a an html file called index.html inside a directory with the same name as the source jade file?
Examples
/src/templates/about.jade >> /public/about/index.html
/src/templates/contact.jade >> /public/contact/index.html
/src/templates/features.jade >> /public/features/index.html
If you want to include sub-directories you can go with:
.pipe(rename(function(path){
if(path.basename != 'index')
{
var crumbs = path.dirname.split('/')
crumbs.push(path.basename)
path.basename = 'index'
path.extname = '.html'
path.dirname = crumbs.join('/')
}
return path
}))
I've been using this with success on a front-matter solution. Don't forget to include /** before /*.filetype in the gulp.src
I think what you need is gulp-rename plugin. Play around the following code, maybe it will solve your problem.
var gulp = require('gulp'),
jade = require('gulp-jade')
rename = require('gulp-rename');
gulp.task('jade', function() {
return gulp.src('src/templates/**/*.jade')
.pipe(jade())
.pipe(rename(function(path) {
var filename = path.basename;
path.basename = 'index';
path.extname = '.html';
path.dirname = filename;
return path;
}))
.pipe(gulp.dest('public'));
});
I think it's a combination of some gulp trickery and proper usage of Jade itself.
the following works for me, and results with index.html including all other files:
1) Project Structure:
- src
-- templates
--- footer.jade
--- layout.jade
-- index.jade
2) gulpfile:
var gulp = require('gulp'),
jade = require('gulp-jade');
gulp.task('jade', function() {
return gulp.src(['!src/templates/**/*.jade', 'src/index.jade'])
.pipe(jade())
.pipe(gulp.dest('public'));
});
Notice i've changed the src input. first, the source files are passed to gulp as an array. second, i've added an '!' (exclamation mark) before the files you want gulp to ignore.
3) Jade
you can (and should) use include/extend to tell jade how to assemble your page eventually.
for example, this is what my files include:
src/templates/footer.jade
h1
some text
src/templates/layout.jade
doctype html
html
head
block title
title Default title
body
block content
src/index.jade
extends ./templates/layout.jade
block title
title Article Title
block content
h1 My Article
include ./templates/footer.jade
Hope this helps. I'm just learning this too :)
I had to use gulp-rename:
var gulp = require('gulp'),
jade = require('gulp-jade')
rename = require('gulp-rename');
gulp.task('jade', function() {
return gulp.src('src/views/**/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(rename(function(path){
if (path.basename=='index'){
return;
}
path.dirname=path.basename.split('-').join('/');
path.basename="index";
}))
.pipe(gulp.dest('./public/'))
callback();
});
I have a Gulp task that needs to copy the contents from one directory to another and rename each file with a specific pattern. Basically, if I have main.css, I need it to create a copy of the main.css and name it main_main_bk.css (don't ask - it's a convention that I need to abide by). To be clear, I need to add a _ followed by the name of the file currently being processed followed by _bk. How can I read what the name of the current file is in Gulp?
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('copit', function() {
gulp.src('asset/css/*.css')
.pipe(rename({suffix: '_' + ??? + '_bk'}))
.pipe(gulp.dest('asset/test'));
});
So,
asset/css/main.css -> asset/test/main_main_bk.css
asset/css/style.css -> asset/test/style_style_bk.css
Etc.
You can use basename and rename it via function
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('copit', function() {
gulp.src('asset/css/*.css')
.pipe(rename(function (path) {
path.basename += "_" + path.basename + "_bk";
}))
.pipe(gulp.dest('asset/test'));
});
Using gulp-sftp, I can't seem to only upload the file that has changed after CSS minification.
The semi-working snippet below begins by compiling the CSS and then continues to watch for changes in the src dir. It follows on by watching for changes in the dist dir (where minified CSS is stored) in order to upload that file to a web server.
However, this does not work as gulp is uploading everything rather than only the file that has changed and been minified.
var gulp = require('gulp'),
changed = require('gulp-changed'),
minifycss = require('gulp-minify-css'),
sftp = require('gulp-sftp')
;
var src = './src/',
dist = './dist/';
var srcStyles = src + '**/*.css',
distStyles = dist + '**/*.css';
var host = 'ftp.xxxx.xx.xx',
auth = 'keyMain',
remotePath = 'public_html';
gulp.task('compilecss', function(){
gulp.src(srcStyles)
.pipe(changed(dist))
.pipe(minifycss({keepBreaks: true}))
.pipe(gulp.dest(dist))
;
});
gulp.task('uploadcss', function(){
gulp.src(distStyles)
.pipe(changed(dist))
.pipe(sftp({
host: host,
auth: auth,
remotePath: remotePath
}))
;
});
gulp.task('main', function(){
gulp.start('compilecss');
});
gulp.task('watch', function(){
gulp.watch(srcStyles, ['compilecss']);
gulp.watch(distStyles, ['uploadcss']);
});
gulp.task('default', ['main', 'watch']);
No need for two tasks. gulp is file-based which means you should think in pipelines, not tasks.
var gulp = require('gulp'),
changed = require('gulp-changed'),
minifycss = require('gulp-minify-css'),
sftp = require('gulp-sftp');
var src = './src/',
dist = './dist/';
var srcStyles = src + '**/*.css',
distStyles = dist + '**/*.css';
var host = 'ftp.xxxx.xx.xx',
auth = 'keyMain',
remotePath = 'public_html';
gulp.task('compile', function (){
return gulp.src(srcStyles)
.pipe(changed(dist))
.pipe(minifycss({
keepBreaks: true
}))
.pipe(gulp.dest(dist))
.pipe(sftp({
host: host,
auth: auth,
remotePath: remotePath
}));
});
gulp.task('watch', function (){
gulp.watch(srcStyles, ['compile']);
});
gulp.task('default', ['compile', 'watch']);