I am having trouble controlling the order in which my javascript files are concatenated with Gulp. I've tried gulp-order but it doesn't seem to work. I just started using Gulp, so I am sure (hoping) this is an easy solution. I did notice some SO posts on renaming the files with numbers...I do not want to do this. Thank you.
gulp.task('scripts', function () {
gulp.src('starter_app/static/backoffice/js/vendor/*.js')
.pipe(order([
'excanvas.js',
'respond.js',
'js.cookie.min.js',
'bootstrap-hover-dropdown.min.js',
'jquery.slimscroll.min.js',
'jquery.blockui.min.js',
'jquery.uniform.min.js',
'bootstrap-switch.min.js',
'app.min.js',
'dashboard.min.js',
'layout.min.js',
'quick-sidebar.min.js'
]))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('starter_app/static/backoffice/js'));
});
You can do:
gulp.task('scripts', function () {
gulp.src([
'excanvas.js',
'respond.js',
'js.cookie.min.js',
'bootstrap-hover-dropdown.min.js',
'jquery.slimscroll.min.js',
'jquery.blockui.min.js',
'jquery.uniform.min.js',
'bootstrap-switch.min.js',
'app.min.js',
'dashboard.min.js',
'layout.min.js',
'quick-sidebar.min.js'
], {
cwd: 'starter_app/static/backoffice/js/vendor'
})
.pipe(concat('scripts.js'))
.pipe(gulp.dest('starter_app/static/backoffice/js'));
});
Related
Years back I setup vs code to somewhat replicate the current methods I was using to design my sites (using standalone apps). I decided at the time I would just stick to what I was using. Since those apps are no longer maintained I am coming across compiling issues now - the time has come to make the jump.
I am having trouble with my gulpfile.js which is from back when I originally tried this all out. I saved it in case I needed to return to using vs code. Problem is apparently this format no longer works because gulp has updated. All of this is basically foreign to me right now and while I understand what things are doing I don't understand enough to modify this to the current method for gulp 4^.
Any chance someone can help me out with this one? I've looked at the guides about series and parallel and so on. I guess it's easier for me to understand by looking at a working example.
my old gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
//processes the scss files in this folder
//minimizes them
gulp.task('sass', function () {
return gulp.src('_config/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cleanCSS())
.pipe(gulp.dest('assets/css'));
});
//minifies all js files in this folder
gulp.task('js', function () {
return gulp.src('_config/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/js'));
});
//minifies all js files in this folder
gulp.task('scripts', function () {
return gulp.src('_config/scripts/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/scripts'));
});
//creates 'watchers' that run tasks on specific activities
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', ['sass']);
gulp.watch('_config/js/**/*.js', ['js']);
gulp.watch('_config/scripts/**/*.js', ['scripts']);
gulp.watch('_config/img/**/*', ['img']);
});
//this is the default task that runs everything
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);
You are not that far from where you need to be. Change this code:
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', ['sass']);
gulp.watch('_config/js/**/*.js', ['js']);
gulp.watch('_config/scripts/**/*.js', ['scripts']);
gulp.watch('_config/img/**/*', ['img']);
});
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);
to
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
gulp.watch('_config/js/**/*.js', gulp.series('js'));
gulp.watch('_config/scripts/**/*.js', gulp.series('scripts'));
gulp.watch('_config/img/**/*', gulp.series('img'));
});
gulp.task('default', gulp.series('sass', 'js', 'scripts', 'watch'));
gulp.task now has this signature: gulp.task([taskName], taskFunction)
Before gulp v3 used an array of tasks as the second argument. gulp v4 uses a function, like gulp.series() or gulp.parallel(), as the second argument. And gulp.series() takes a list of tasks as its arguments. Since you used the gulp.task() method to create your tasks, the task names in series should appear as strings, like 'sass', 'js', etc.
Note: The preferred way to create tasks in v4 is as functions like:
function scripts() {
return gulp.src('_config/scripts/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/scripts'));
});
Then you would use those function names in series as gulp.series(scripts, js) - not as strings. You should look into using this form of tasks.
gulp.watch() signature: gulp.watch(globs, [options], [task])
The [task] can be a single task name, like your 'sass' or a composed task, which just means one generated using series or parallel.
In your case, you are running only one task in each watch statement, so
gulp.watch('_config/scss/**/*.scss', 'sass');
should suffice. I showed them as composed tasks like:
gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
in case in the future you want to run more than one task upon a file change. In which case you could use something like:
gulp.watch('_config/scss/**/*.scss', gulp.series('sass', 'serve'));
for example.
Finally switch out gulp-uglify for gulp-terser. gulp-terser will handle es6 syntax that gulp-uglify cannot. gulp-terser
I've got gulp running compiling and minifying my scss and js files correctly, but for the life of my I can't seem to correctly compile haml files with the gulp-haml module.
The respective code in my gulpfile.js looks like this:
gulp.task('haml', function() {
gulp.src('.app/**/*.haml')
.pipe(plumber())
.pipe(haml())
.pipe(gulp.dest('./hamltest'));
});
gulp.task('scripts', [
'styles',
'app',
'haml'
]);
gulp.task('watch', function() {
gulp.watch([
'./styles/',
'.app/**/*.js',
'.app/**/*.haml'
],
[
'styles',
'app',
'haml'
]);
});
gulp.task('default', [
'styles',
'scripts',
'haml',
'watch'
]);
I've set up all my gulp variables and I'm running:
gulp-haml -v 0.1.6
haml -v 0.4.3
gulp CLI -v 1.2.2
Local -v 3.9.1
using the command: $ gulp in terminal to run everything
At this point I'm wondering if it's even possible to compile multiple haml files into one html or compile multiple haml files into a main haml file to then render into html.
Is using haml partials a better method to do this? Is this whole thing even possible with Gulp? Any insight would be much appreciated.
Additional Info: I've also tried using the pipe order() and pipe concat() functions
With gulp-haml Impossible to compile Ruby code like:
= Haml::Engine.new(File.read('./includes/menu-main.haml')).render
because gulp-haml has no full Ruby engine functionality. If you want to use Ruby, download it and install, then install haml for it (but Ruby requests are very slow ~1-3s). Or, use some other templater, like gulp-file-include, so you can compile then include your compiled .HTML files (im using gulp-jhaml, it has same features with gulp-haml):
var haml = require('gulp-jhaml'),
gih = require('gulp-include-html'),
browserSync = require('browser-sync');
gulp.task('haml', function() {
return gulp.src(['source-folder/*.haml'])
.pipe(haml({}, {eval: false}))
.on('error', function(err) {
console.error(err.stack)
})
.pipe(gulp.dest('source-folder/html'));
});
gulp.task('html-include', ['haml'], function () {
gulp.src(['source-folder/html/*.html'])
.pipe(gih({
prefix: '##'
}))
.pipe(gulp.dest('result-folder'));
});
gulp.task('watch', ['html-include', 'browser-sync'], function() {
gulp.watch('source-folder/*.haml', ['html-include']);
gulp.watch('result-folder/*.html', browserSync.reload);
});
gulp.task('default', ['watch']);
You can also try gulp-pug with a native function include. Pug - was called 'Jade' before.
I'm trying to set a shopify dev workflow, and i'm stuck in a problem. How can i change the dest() output in gulp-sass to use .liquid files in the assets folder?
gulp.task('sass', function() {
gulp.src('stylesheets/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/'));
});
I want to get as output something like main.css.liquid, so i can use the .liquid methods.
Is that possible?
There's a good thread about it # Gulp. As said it seems that gulp-rename may be a great fit.
In your case, you can change your code to:
gulp.task('sass', function() {
gulp.src('stylesheets/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.rename('destinationpath/yourfile.liquid'));
.pipe(gulp.dest('./assets/'));
});
I tried
gulp.task('sass', function () {
return gulp.src(['./scss/*.scss'])
.pipe($.replace(/_VIEWPORT_WIDTH_/g,conf.project.viewport||640))
.pipe($.sass({errLogToConsole: true}))
.pipe(gulp.dest('./resources/css/'));
});
still not working.
pipe replace after SCSS will work,but SCSS can not do math during the process.
gulp.task('sass', function () {
return gulp.src(['./scss/*.scss'])
.pipe($.sass({errLogToConsole: true}))
.pipe($.replace(/_VIEWPORT_WIDTH_/g,conf.project.viewport||640))
.pipe(gulp.dest('./resources/css/'));
});
any suggestion?I know there is an ugly way,but that's too Grunt
gulp.task('sass', function () {
return gulp.src(['./scss/*.scss'],{buffer:true})
.pipe($.replace(/_VIEWPORT_WIDTH_/g,conf.project.viewport||640))
.pipe(gulp.dest('./tmp/scss/'))
.pipe($.sass({errLogToConsole: true}))
.pipe(gulp.dest('./resources/css/')).on('end',function(){
del(['./tmp/scss/'], {force: true});
});
});
It's because the latest version of gulp-sass (and perhaps every previous version) has a serious bug / design flaw -- it discards changes to file contents from earlier in the pipeline. I reported this at dlmanning/gulp-sass#158 and it's supposed to be fixed in the next major version (v2) I believe.
I am trying to do automation to concat and uglify js in gulp.
Here is my gulpfile.js:
gulp.task('compressjs', function() {
gulp.src(['public/app/**/*.js','!public/app/**/*.min.js'])
.pipe(sourcemaps.init())
.pipe(wrap('(function(){"use strict"; <%= contents %>\n})();'))
.pipe(uglify())
.pipe(concat('all.js'))
.pipe(rename({
extname: '.min.js'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('public/app'));
})
Do you think it is needed to wrap every file with (function(){"use strict"; <%= contents %>\n})(); to avoid conflict when every file is being join together? Do you think my gulp task is good, or it can even better for performing it's task?
Wrapping every file in a closure really isn't necessary for most code. There are some bad libs out there that leak vars, but I'd suggest you deal with them on a case by case basis and, if possible, issue Pull Requests to fix the problem or just stop using them. Usually, they can't be fixed as simply as wrapping them in a function.
The task you have above won't properly pass all files to the uglify task - you will need to concatenate first. You also don't need to rename as you can specify the full name in concatenate.
Below is a well tested Gulp setup for doing exactly what you've asked:
gulp.task('javascript:vendor', function(callback) {
return gulp.src([
'./node_modules/jquery/dist/jquery.js',
'./node_modules/underscore/underscore.js',
'./node_modules/backbone/backbone.js'
])
.pipe(sourcemaps.init())
// getBundleName creates a cache busting name
.pipe(concat(getBundleName('vendor')))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/app'))
.on('error', handleErrors);
});