I'm hoping to combine everything into one minified JS file, with the contents of main.js right at the end. The below outputs a minified file int he correct destination, but it seems to ignore the order. Any help would be much appreciated.
// Filepaths
var themepath = 'wp/wp-content/themes/themename'
// optimise scripts
gulp.task('scripts', function() {
return gulp.src('build/scripts/**/*.js')
.pipe(order(['build/scripts/plugins/**/*.js','build/scripts/main.js']))
.pipe(concat('main-min.js'))
.pipe(uglify())
.pipe(plumber())
.on('error', errorLog)
.pipe(gulp.dest(themepath + '/assets/scripts/min/'))
.pipe(browserSync.stream());
});
Try run uglify before concat. I think uglify messes with the order. So try the following:
// Filepaths
var themepath = 'wp/wp-content/themes/themename'
// optimise scripts
gulp.task('scripts', function() {
return gulp.src('build/scripts/**/*.js')
.pipe(order(['build/scripts/plugins/**/*.js','build/scripts/main.js']))
.pipe(uglify())
.pipe(concat('main-min.js'))
.pipe(plumber())
.on('error', errorLog)
.pipe(gulp.dest(themepath + '/assets/scripts/min/'))
.pipe(browserSync.stream());
});
Alright I figured it out.
Because you're specifying the order within an already predefined stream from gulp.src. You need to specify the order relative to the original gulp.src path, I.E. removed build/scripts from the order paths:
.pipe(order(['plugins/**/*.js', 'main.js']))
Related
I wrote a gulp task to process all scss files in one folder into separate css files.
gulp.task('process', function () {
gulp.src(['./base.scss', './layout/*.scss'])
.pipe(sass())
.pipe(gulp.dest('dist'))
});
Now I want to concatenate one file (base.scss) to each scss process; how can I do this?
This should help you but I didn't test it. Gulp-foreach is good for you, it will treat each file from gulp.src as its own stream which you can manipulate separately. The code below then appends your base.scss to each stream, then concatenates them and then they go through the sass pipe.
var foreach = require('gulp-foreach');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');
gulp.task('default', function () {
return gulp.src('./layout/*.scss')
// treats each file in gulp.src as a separate stream
.pipe(foreach(function (stream, file) {
return stream
// append or prepend
.pipe(addsrc.append('./base.scss'))
// you do have access to the 'file' parameter here if you need to rename
.pipe(sass())
.pipe(concat(path.basename(file.path)))
.pipe(gulp.dest('dist'));
}));
});
Let me know if it works for you.
How can I use the parent directory of a file-directory of a wildcard source in gulp?
Source files:
|gulpfile.js (just to show where the base is)
|elements/foundations/A/js/src/mainA.js
|elements/foundations/A/js/src/subA.js
|elements/foundations/B/js/src/mainB.js
...
|elements/foundations/F/js/src/mainF.js
Desired target/result:
|elements/foundations/A/js/mainA.min.js
|elements/foundations/A/js/subA.min.js
|elements/foundations/B/js/mainB.min.js
...
|elements/foundations/F/js/mainF.min.js
I've tried different approaches, but eventually none of them worked.
This one runs without errors but doesn't generate any files.
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/**/'})
.pipe(rename({suffix: '.min'}))
// .pipe(uglify()) and others ...
.pipe(gulp.dest('./'))
;
});
This one generates files, but directly in the src directory.
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./elements/foundations/'))
;
});
And if I try to use the wildcard (**) in the destination, gulp ends up in an infinite loop (independently of the position of the wildcard).
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./elements/foundations/**/'))
;
});
I've also tried to use it without setting the base, but the results were similar.
You can pass a function to gulp-rename for more complex renaming operations. This allows you for example to use the path module of node.js to manipulate file paths:
var gulp = require('gulp');
var rename = require('gulp-rename');
var path = require('path');
gulp.task('scripts', function() {
return gulp.src('./elements/foundations/**/js/src/*.js')
.pipe(rename(function(file) {
file.dirname = path.dirname(file.dirname);
file.basename = file.basename + '.min';
return file;
}))
// .pipe(uglify()) and others ...
.pipe(gulp.dest('./elements/foundations/'))
});
I am using gulp for the very first time.
I managed doing merge streaming for css files but somehow its not working for javascript files.
Here is my code,
gulp.task('styles', () => {
var commonStyles = gulp.src([
'css/website/bootstrap.min.css',
'css/website/font.css'
])
// Concatenate and minify styles
.pipe(minifyCss())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('dist/styles'));
var otherStyles = gulp.src([
'css/website/landing.css',
'css/website/careersNew1.css'
])
.pipe(minifyCss())
.pipe(gulp.dest('dist/styles'));
return merge(commonStyles, otherStyles);
});
// Concatenate and minify JavaScript
gulp.task('scripts', () => {
var commonScript = gulp.src([
'js/scripts/jquery.min.js',
'js/scripts/bootstrap.min.js'
])
.pipe(uglify())
.pipe(concat('style.min.js'))
.pipe(gulp.dest('dist/scripts'));
var otherScript = gulp.src([
'js/bf_scripts.js',
'js/custom_rbox.js'
])
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'));
return merge(commonScript, otherScript);
});
Css output is working fine. But I am not getting any otherScript files in my dist/scripts/ folder
You should only run uglify() on your custom scripts, because the jQuery and Bootstrap versions you're using are already minified/uglified, and that wastes processing time and slows down your build script. Also, I recommend keeping libraries you download in separate folders from the custom code you write. Keep jQuery and Bootstrap in lib folder, and your code in src folder. You can then use wildcard globs to grab all files instead of specifying individual files.
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');
gulp.task('scripts', function() {
// First, uglify custom JS that you wrote
return gulp.src('src/scripts/**/*.js')
.pipe(uglify())
// Now, prepend the already-minfied JS libraries you're importing and concat into style.min.js
.pipe(addsrc.prepend('lib/scripts/**/*.js'))
.pipe(concat('style.min.js'))
.pipe(gulp.dest('dist/scripts'))
})
gulp.task('default', ['scripts'])
try to use buffer before uglify;
var buffer = require('gulp-buffer');
.pipe(buffer())
.pipe(uglify())
I have set up a very simple gulpfile.js There are only two task - 'sass' and 'minify-js'. These two tasks are fired by the task 'watch' when a change is detected. It all seems to be working well: Gulp is listening for changes, *.scss files are compiled into CSS, the console generates output as expected, without any errors. However, the CSS files do not get minified there are no output files from the 'minify-css' task whatsoever.
Why is 'minify-css' not working? What am I missing here?
This is my gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function() {
gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('minify-css', function() {
gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']);
});
Sounds like a race condition. Sass and MinifyCSS are executed in parallel, might be that your Sass task isn't done when you're already running MinifyCSS. Sass should be a dependency, so you have two options:
Make Sass a dependency from minifycss:
gulp.task('minify-css', ['sass'], function() {
return gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']);
});
Have one task that does both!
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
The latter one is actually the preferred version. You save yourself a lot of time if you don't have an intermediate result
Btw: Don't forget the return statements
I know this is kind of an old question but thought I'd throw this out there because it's something that's helped me. To build on the answer from ddprrt, I'd recommend changing:
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
to:
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass('site.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'))
.pipe(minifyCSS())
.pipe(rename('site.min.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
This allows you to debug with the un-minified CSS and deploy the minified version.
It's because the gulp-minify-css is deprecated. Use gulp-clean-css instead.
Click here(https://www.npmjs.com/package/gulp-minify-css "npm-clean-css")!
I'm using gulp-rev to build static files that I can set to never expire. I'd like to replace all references to the generated files in index.html to these renamed files, but I can't seem to find anything that does that like Grunt with usemin.
As far as I can tell right now, I have some options.
Use gulp-usemin2, which depends on gulp-rev. When I go to search Gulp plugins, it says that gulp-usemin2 does too much so I should use gulp-useref instead, but I can't configure gulp-ref to use gulp-rev's output.
Write my own plugin the replace the blocks (scripts & styles) in index.html (and in the CSS) with the generated files.
Any ideas? I don't see why this little use case should be the only thing in my way to replacing Grunt.
Rather than trying to solve this problem multiple gulp steps (which gulp-rev seems to want you to do), I've forked gulp-rev to gulp-rev-all to solve this usecase in one gulp plugin.
For my personal usecase I wanted to rev absolutely everything but as someone else raised an feature request, there should be the ability to exclude certain files like index.html. This will be implemented soon.
I've just written a gulp plugin to do this, it works especially well with gulp-rev and gulp-useref.
The usage will depend on how you've set things up, but it should look something like:
gulp.task("index", function() {
var jsFilter = filter("**/*.js");
var cssFilter = filter("**/*.css");
return gulp.src("src/index.html")
.pipe(useref.assets())
.pipe(jsFilter)
.pipe(uglify()) // Process your javascripts
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(csso()) // Process your CSS
.pipe(cssFilter.restore())
.pipe(rev()) // Rename *only* the concatenated files
.pipe(useref.restore())
.pipe(useref())
.pipe(revReplace()) // Substitute in new filenames
.pipe(gulp.dest('public'));
});
I have confronted the same problem, I tried gulp-rev-all, but it has some path problem, not very free to use.
So I figure out an solution, use gulp-rev and gulp-replace:
At first I have a replace symbol in my html(js, css) files
<link rel="stylesheet" href="{{{css/common.css}}}" />
<script src="{{{js/lib/jquery.js}}}"></script>
in css files
background: url({{{img/logo.png}}})
Second after some compile task, use gulp-replace to replace all the static files reference:
take stylus compile in development as example:
gulp.task('dev-stylus', function() {
return gulp.src(['./fe/css/**/*.styl', '!./fe/css/**/_*.styl'])
.pipe(stylus({
use: nib()
}))
.pipe(replace(/\{\{\{(\S*)\}\}\}/g, '/static/build/$1'))
.pipe(gulp.dest('./static/build/css'))
.pipe(refresh());
});
In production environment, use gulp-rev to generate rev-manifest.json
gulp.task('release-build', ['release-stylus', 'release-js', 'release-img'], function() {
return gulp.src(['./static/build/**/*.css',
'./static/build/**/*.js',
'./static/build/**/*.png',
'./static/build/**/*.gif',
'./static/build/**/*.jpg'],
{base: './static/build'})
.pipe(gulp.dest('./static/tmp'))
.pipe(rev())
.pipe(gulp.dest('./static/tmp'))
.pipe(rev.manifest())
.pipe(gulp.dest('./static'));
});
Then use gulp-replace to replace the refs in static files with rev-manifest.json:
gulp.task('css-js-replace', ['img-replace'], function() {
return gulp.src(['./static/tmp/**/*.css', './static/tmp/**/*.js'])
.pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
var manifest = require('./static/rev-manifest.json');
return '/static/dist/'+manifest[p1]
}))
.pipe(gulp.dest('./static/dist'));
});
This helped me gulp-html-replace.
<!-- build:js -->
<script src="js/player.js"></script>
<script src="js/monster.js"></script>
<script src="js/world.js"></script>
<!-- endbuild -->
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
gulp.task('default', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'styles.min.css',
'js': 'js/bundle.min.js'
}))
.pipe(gulp.dest('build/'));
});
You could do it with gulp-useref like this.
var gulp = require('gulp'),
useref = require('gulp-useref'),
filter = require('gulp-filter'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
rev = require('gulp-rev');
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
return gulp.src('app/*.html')
.pipe(useref.assets())
.pipe(jsFilter)
.pipe(uglify())
.pipe(rev())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(rev())
.pipe(cssFilter.restore())
.pipe(useref.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
or you could even do it this way:
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
return gulp.src('app/*.html')
.pipe(useref.assets())
.pipe(rev())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(cssFilter.restore())
.pipe(useref.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
The problem is updating the asset paths in the html with the new rev file paths. gulp-useref doesn't do that.