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())
Related
Even after removing the uglify from my gulp.js file, it keeps outputting minified javascript. It also runs in milliseconds, making me think it's somehow caching the files. Can I force gulp to redo the tasks completely even though my files haven't changed?
var gulp = require('gulp');
var minifyCSS = require('gulp-csso');
var uglify = require('gulp-uglify-es').default;
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function(){
return gulp.src([
... bunch of css files
])
.pipe(concat('all.css'))
.pipe(gulp.dest('public/css'))
});
gulp.task('js', function(){
return gulp.src([
...bunch of js files
])
.pipe(concat('all.js'))
.pipe(gulp.dest('public/js'))
});
gulp.task('default', [ 'css', 'js' ]);
Sorry for answering my own question. I seem to have had some typo. At first I had all my paths in subfolders. Now that I have moved all my js files into one folder, then ran gulp, I have no more errors. I also think because some files were already minified before gulp this added to the confusion.
Nothing to see here, move on.
Trying to use main-bower-files and filters to copy files from bower_components. So far its working except for less. All it is taking is bootstrap.less and not all the .less files.
var gulp = require('gulp'),
gutil = require('gulp-util'),
gulpFilter = require('gulp-filter'),
bowerMain = require('main-bower-files'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
// Group tasks
gulp.task('default', function() {
gutil.log("Test");
});
// Individual tasks
gulp.task('bower', function() {
var jsFilter = gulpFilter('*.js', {restore: true}),
lessFilter = gulpFilter('*.less');
return gulp.src(bowerMain())
// JS
.pipe(jsFilter)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./public/js'))
.pipe(jsFilter.restore)
// CSS
.pipe(lessFilter)
//.pipe(concat('styles.css'))
.pipe(gulp.dest('./temp'))
});
If I gutil.log bowerMain and its not showing all the less files. What am I doing wrong here?
if you check the main section of bower.json for bootstrap it shows below
"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
],
its containing only boostrap.less hence you see only that one less file. Hence nothing wrong with what you are doing...
you can override the main section of boostrap in your bower.json to include other less files if you want, read on how to do it here
How do I use gulp to convert all jsx files to JavaScript?
When I try to do so, I get the error undefined function require
I'm using the following script.
What I want to do is use gulp to convert all jsx to JavaScript. Also use browserfy in my jsx files.
var gulp = require('gulp')
var react = require('gulp-react')
gulp.task('transpile-js', function() {
return gulp.src('./src/*.jsx')
.pipe(react({harmony: true}))
.pipe(gulp.dest('./build'))
})
I have jsx files in the src directory. I want to convert them into one JavaScript file and store the result in the build directory
Take a look at my domno repo for more:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer');
gulp.task('script', function () {
return browserify({
entries : ['the/path/to/the/main/entry/file.js'],
transform: ['babelify']
})
.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest(dir.web));
});
There are several ways of configuring Browserify...
What is the proper way to use gulp-watch plugin?
...
var watch = require('gulp-watch');
function styles() {
return gulp.src('app/styles/*.less')
.pipe(watch('app/styles/*.less'))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulp.dest('build'));
}
gulp.task('styles', styles);
I don't see any results when run gulp styles.
In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
Then type gulp watch and hit enter.
If your gulpfile.js is configured properly (see example below) than you will see output like this:
[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms
Every time you save your file you'll see new output here instantly.
Here is an example of a functional gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
watchLess = require('gulp-watch-less'),
pug = require('gulp-pug'),
less = require('gulp-less'),
minifyCSS = require('gulp-csso'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('watch', function () {
gulp.watch('source/less/*.less', ['css']);
});
gulp.task('html', function(){
return gulp.src('source/html/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function(){
return gulp.src('source/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
});
gulp.task('default', [ 'html', 'js', 'css', 'watch']);
Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.
gulp.task('less', function() {
gulp.src('app/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('watch', function() {
gulp.watch(['app/styles/*.less'], ['less'])
});
Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.
This is working code I hope it helps the lurkers.
Then (for version 4+) you need to do something like this:
var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
var uglify = require('gulp-uglify'); // and here as well
gulp.task('scripts', function(done) {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('watch', function() {
gulp.watch('./src/js/*.js',gulp.series(['scripts']))
});
** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))
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.