gulpjs merge css and less - css

I'm trying to take my less files and convert them into css files, then take other css files and combine the two sets together to form one css file. I don't get any errors but the css file is never created. Is there a way to combine two different sets of css together to form one css file? Thanks in advance.
var gulp = require("gulp");
var gulpUtil = require("gulp-util");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var minify = require("gulp-minify-css");
var notify = require("gulp-notify");
var addsrc = require("gulp-add-src");
/*CSS Section*/
gulp.task("build-less", function () {
return gulp.src([
"Less/common.less",
"Less/box.less",
"Less/callout.less",
"Less/form-controls.less",
"Less/form.less",
"Less/scrollbar.less",
"Less/overflow-table.less",
"Less/button.less",
"Less/theme.less",
"Less/auto-complete.less"
]).pipe(less())
.pipe(addsrc([
"Css/bootstrap.css",
"Css/bootstrap-theme.css",
"Distribution/Styles/theme.css",
"Css/font-awesome.css",
"Css/font-awesome-animation.css",
"Css/animate.css",
"Css/bootstrap-select.css"
]))
.pipe(concat("dustball.min.css"))
.pipe(minify())
.pipe(gulp.dest("Destination/Styles"));
});

Just came across a plugin call merge2 and it worked. Below is the updated version.
var gulp = require("gulp");
var gulpUtil = require("gulp-util");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var minify = require("gulp-minify-css");
var notify = require("gulp-notify");
var merge = require("merge2");
/*CSS Section*/
gulp.task("build-less", function () {
var cssFiles = gulp.src([
"Css/bootstrap.css",
"Css/bootstrap-theme.css",
"Distribution/Styles/theme.css",
"Css/font-awesome.css",
"Css/font-awesome-animation.css",
"Css/animate.css",
"Css/bootstrap-select.css"
])
.pipe(concat("css-files.css"));
var lessCssFiles = gulp.src([
"Less/common.less",
"Less/box.less",
"Less/callout.less",
"Less/form-controls.less",
"Less/form.less",
"Less/scrollbar.less",
"Less/overflow-table.less",
"Less/button.less",
"Less/theme.less",
"Less/auto-complete.less"
])
.pipe(less())
.pipe(concat("less-files.css"));
return merge(cssFiles, lessCssFiles)
.pipe(concat("dustball.min.css"))
.pipe(minify())
.pipe(gulp.dest("Distribution/Styles"));
});

Related

Switch output folder based on filename in gulp task

I have different *.scss files in my src folder and I want one file to be compiled in its own separate folder.
Lets assume I have the files normalFile_1.scss, specialFile.scss, normalFile_2.scss. I want the two normal files to be compiled to the folder Public/Css, the special file however should end up in the folder Public/Css/Special.
I have tried to get the current filename in the task with gulp-tap, which works fine.
.pipe($.tap(function (file, t) {
filename = path.basename(file.path);
console.log(filename); //outputs normalFile_1.css, specialFile.css, normalFile_2.css
}))
And with gulp-if I then wanted to switch the output folder based on the filename variable (PATHS.dist is the output "root" folder Public):
.pipe($.if(filename == 'specialFile.css', gulp.dest(PATHS.dist + '/Css/Special'), gulp.dest(PATHS.dist + '/Css')));
But everything still ends up in the Public/Css folder. Why does this not work? Is this even a good way of trying to accomplish that or are there better methods?
There are two ways to do this shown below:
var gulp = require("gulp");
var sass = require("gulp-sass");
var rename = require("gulp-rename");
var path = require('path');
gulp.task('sass', function () {
return gulp.src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(rename(function (path) {
if (path.basename == "specialFile") {
path.dirname = "Special";
}
}))
.pipe(gulp.dest('Public/Css'))
// .pipe(gulp.dest(function(file) {
// var temp = file.path.split(path.sep);
// var baseName = temp[temp.length - 1].split('.')[0];
// console.log(baseName);
// if (baseName == "specialFile") {
// return 'Public/Css/Special';
// }
// else return 'Public/Css';
// }))
});
gulp.task('default', ['sass']);
Obviously I suggest the rename version.
[Why a simple file.stem or file.basename doesn't work for me in the gulp.dest(function (file) {} version I don't know - that would certainly be easier but I just get undefined.]

Closure Compiler renaming function in extern

I'm trying to create an extern for Electron that gets used by the Google Closure Compiler. This is what my externs look like:
var electron = {};
electron.dialog = function() {};
electron.app = function() {};
electron.ipcRenderer = function() {};
electron.on = function() {};
electron.send = function() {};
electron.remote = function(){}; // {return{getGlobal: function(){}}};
electron.remote.getGlobal = function(a){};
electron.require = function() {};
electron.buildFromTemplate = function() {};
electron.popup = function() {};
electron.getCurrentWindow = function() {};
electron.showErrorBox = function() {};
electron.setTitle = function() {};
electron.setRepresentedFilename = function() {};
electron.showMessageBox = function() {};
electron.getPath = function() {};
electron.showSaveDialog = function() {};
electron.showOpenDialog = function() {};
var process = {
platform: {}
};
The problem I am having is that the compiler is not retaining the function name for the getGlobal function. My original source code looks like this:
const electron = require('electron');
electron.remote.getGlobal('sharedObject')
After running the compiler, it ends up looking like this:
var a = require("electron");
console.log(a.remote.D("sharedObject"));
a.remote.D should really be a.remote.getGlobal
How can I get the compiler to retain the getGlobal function name?
I changed my original source code to now look like this:
electron.remote'getGlobal'
The compiler will retain the name. This is because the compiler always keeps strings intact. The compile code now looks like this:
console.log(a.remote.getGlobal("sharedObject"));
It is still a mystery though why the compiler doesn't recognize the getGlobal function in the extern file. Maybe it can only handle functions that are nested one level deep from their root object (whereas here, it's two levels). Another reason may have to do with how the compiler carries out its multiphase compiling which is somewhat flawed in treating nested functions.

Why is gulp injecting the css styles in the wrong directory?

I am pretty new to Gulp.
I'm working in a project that uses gulp and when I run gulp serve in the console and make some changes in my sass files, gulp inject the styles in the wrong directory:
[09:39:26] gulp-ruby-sass: write ../../../../../cjdelgado/AppData/Local/Temp/gulp-ruby-sass/index.css
[09:39:26] gulp-ruby-sass: write ../../../../../cjdelgado/AppData/Local/Temp/gulp-ruby-sass/index.css.
And this doesn't happen to my coworkers.
Could this be happening because my node or ruby versions?
Can I change that path manually? And, Should I change it?
This is my gulp file:
/**
* Welcome to your gulpfile!
* The gulp tasks are split into several files in the gulp directory
* because putting it all here was too long
*/
'use strict';
var fs = require('fs');
var gulp = require('gulp');
/**
* This will load all js or coffee files in the gulp directory
* in order to load all gulp tasks
*/
fs.readdirSync('./gulp').filter(function(file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
require('./gulp/' + file);
});
/**
* Default task clean temporaries directories and launch the
* main optimization build task
*/
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
And I am running it from:
/c/Users/cjdelgado/Documents/Gitlab/register
And this is my gulp/inject.js file, wich I think the problem could be solved from:
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var $ = require('gulp-load-plugins')();
var wiredep = require('wiredep').stream;
var _ = require('lodash');
var browserSync = require('browser-sync');
gulp.task('inject-reload', ['inject'], function() {
browserSync.reload();
});
gulp.task('inject', ['scripts', 'styles'], function () {
var injectStyles = gulp.src([
path.join(conf.paths.tmp, '/serve/app/**/*.css'),
path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
], { read: false });
var injectScripts = gulp.src([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js'),
path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
])
.pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));
var injectOptions = {
ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
addRootSlash: false
};
return gulp.src(path.join(conf.paths.src, '/*.html'))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

Gulp-less watcher breaks when a less error is encountered in a file

I want to watch a folder of less files. When one of them is changed, I want to compile only the "styles.less" file (this file contains #imports to the rest of the files like "header.less", "navigation.less", etc.)
For this, I created 2 tasks. When I run the task "watchless", everything is ok, it compiles the styles.less to styles.css. But if an error is encountered, when I edit a less file, the watcher breaks, even with gulp-plumber. How can I fix this?
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var less = require('gulp-less');
var watch = require('gulp-watch');
var path_less = 'templates/responsive/css/less/';
var path_css = 'templates/responsive/css/';
gulp.task('less2css', function () {
return gulp.src(path_less + 'styles.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest(path_css))
});
gulp.task('watchless', function() {
gulp.watch(path_less + '*.less', ['less2css']); // Watch all the .less files, then run the less task
});
Finally, it worked, using the following code:
var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('gulp-less');
var watch = require('gulp-watch');
var path_less = 'templates/responsive/css/less/';
var path_css = 'templates/responsive/css/';
gulp.task('less2css', function () {
gulp.src(path_less + 'styles.less')
.pipe(less().on('error', gutil.log))
.pipe(gulp.dest(path_css))
});
gulp.task('watchless', function() {
gulp.watch(path_less + '*.less', ['less2css']); // Watch all the .less files, then run the less task
});

Browserify - multiple entry points

I am using Browserify within gulp. I am trying to compile down my tests to a single file as well. But unlike my main app, which I have working just fine, I am having trouble getting the tests to compile. The major difference is the tests have multiple entry points, there isn't one single entry point like that app. But I am getting errors fro Browserify that it can't find the entry point.
browserify = require 'browserify'
gulp = require 'gulp'
source = require 'vinyl-source-stream'
gulp.task 'tests', ->
browserify
entries: ['./app/js/**/*Spec.coffee']
extensions: ['.coffee']
.bundle
debug: true
.pipe source('specs.js')
.pipe gulp.dest('./specs/')
Below is a task I was able to build that seems to solve the problem. Basically I use an outside library to gather the files names as an array. And then pass that array as the entry points
'use strict;'
var config = require('../config');
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var glob = require('glob');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
gulp.task('tests', function(){
var testFiles = glob.sync('./spec/**/*.js');
return browserify({
entries: testFiles,
extensions: ['.jsx']
})
.bundle({debug: true})
.pipe(source('app.js'))
.pipe(plumber())
.pipe(gulp.dest(config.dest.development));
});
Here's an alternate recipe that fits more with the gulp paradigm using gulp.src()
var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var concat = require('gulp-concat');
gulp.task('browserify', function () {
// use `vinyl-transform` to wrap around the regular ReadableStream returned by b.bundle();
// so that we can use it down a vinyl pipeline as a vinyl file object.
// `vinyl-transform` takes care of creating both streaming and buffered vinyl file objects.
var browserified = transform(function(filename) {
var b = browserify(filename, {
debug: true,
extensions: ['.coffee']
});
// you can now further configure/manipulate your bundle
// you can perform transforms, for e.g.: 'coffeeify'
// b.transform('coffeeify');
// or even use browserify plugins, for e.g. 'minifyiy'
// b.plugins('minifyify');
// consult browserify documentation at: https://github.com/substack/node-browserify#methods for more available APIs
return b.bundle();
});
return gulp.src(['./app/js/**/*Spec.coffee'])
.pipe(browserified)/
.pipe(concat('spec.js'))
.pipe(gulp.dest('./specs'));
});
gulp.task('default', ['browserify']);
For more details about how this work, this article that I wrote goes more in-depth: http://medium.com/#sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623
For start, you can write a suite.js to require all the tests which you want to run and browserify them.
You can see two examples from my project https://github.com/mallim/sbangular.
One example for grunt-mocha-phantomjs
https://github.com/mallim/sbangular/blob/master/src/main/resources/js/suite.js
One example for protractor
https://github.com/mallim/sbangular/blob/master/src/main/resources/js/suite.js
This is just a start and I am sure there are more fancy ways available.
A little more complicated example to build files by glob pattern into many files with watching and rebuilding separated files. Not for .coffee, for es2015, but not a big difference:
var gulp = require("gulp");
var babelify = require("babelify");
var sourcemaps = require("gulp-sourcemaps");
var gutil = require("gulp-util");
var handleErrors = require("../utils/handleErrors.js");
var browserify = require("browserify");
var eventStream = require("event-stream");
var glob = require("glob");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var watchify = require("watchify");
var SRC_PATH = "./src";
var BUILD_PATH = "./build";
var bundle = function (bundler, entryFilepath) {
console.log(`Build: ${entryFilepath}`);
return bundler.bundle()
.on("error", handleErrors)
.pipe(source(entryFilepath.replace(SRC_PATH, BUILD_PATH)))
.pipe(buffer())
.on("error", handleErrors)
.pipe(
process.env.TYPE === "development" ?
sourcemaps.init({loadMaps: true}) :
gutil.noop()
)
.on("error", handleErrors)
.pipe(
process.env.TYPE === "development" ?
sourcemaps.write() :
gutil.noop()
)
.on("error", handleErrors)
.pipe(gulp.dest("."))
.on("error", handleErrors);
};
var buildScripts = function (done, watch) {
glob(`${SRC_PATH}/**/[A-Z]*.js`, function (err, files) {
if (err) {
done(err);
}
var tasks = files.map(function (entryFilepath) {
var bundler = browserify({
entries: [entryFilepath],
debug: process.env.TYPE === "development",
plugin: watch ? [watchify] : undefined
})
.transform(
babelify,
{
presets: ["es2015"]
});
var build = bundle.bind(this, bundler, entryFilepath);
if (watch) {
bundler.on("update", build);
}
return build();
});
return eventStream
.merge(tasks)
.on("end", done);
});
};
gulp.task("scripts-build", function (done) {
buildScripts(done);
});
gulp.task("scripts-watch", function (done) {
buildScripts(done, true);
});
Complete code here https://github.com/BigBadAlien/browserify-multy-build

Resources