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')));
});
Related
How do you concat multiple Less files?
For instance, I have functions.less with all the functions that I want to use them in the style.less:
functions.less:
.rotate (#deg) {
-webkit-transform: rotate(#deg * 1deg);
-moz-transform: rotate(#deg * 1deg);
-ms-transform: rotate(#deg * 1deg);
-o-transform: rotate(#deg * 1deg);
}
style.less:
.button {
.rotate (#deg: 90);
}
gulpfile.js:
// Task to compile less.
gulp.task('compile-less', function () {
return gulp.src([
'stylesheets/*.less'
])
.pipe(sourcemaps.init())
.pipe(less())
.pipe(concat('compiled.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('stylesheets'))
})
// Task to minify css.
gulp.task('minify-css', function () {
return gulp.src([
'stylesheets/compiled.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS({debug: true}))
.pipe(concat('bundle.min.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
I will get:
Potentially unhandled rejection [2] No matching definition was found
for .rotate (#deg: 90) in file /var/www/.../style.less line no. 107
Any ideas?
EDIT:
I get this errors sometimes when I use #import:
undefined:1
SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at loadInputSourceMapFromLocalUri (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:177:15)
at extractInputSourceMapFrom (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:116:17)
at fetchAndApplySourceMap (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:79:10)
at doApplySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:57:14)
at applySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:33:5)
at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:25:12)
at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25)
at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:324:14)
at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25
EDIT 2:
Obviously it is gulp-clean-css that is causing the problem:
// CSS compilation.
var concat = require('gulp-concat')
var cleanCSS = require('gulp-clean-css')
var concatCss = require('gulp-concat-css') // optional
gulp.task('minify-css', function () {
return gulp.src([
'stylesheets/style.css'
])
.pipe(sourcemaps.init())
// .pipe(cleanCSS({debug: true}))
.pipe(concat('bundle.min.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
No error if I remove that line but then I does not minify the css anymore if I do.
Any ideas?
EDIT 3:
Entire content in gulpfile:
var gulp = require('gulp')
var sourcemaps = require('gulp-sourcemaps')
var livereload = require('gulp-livereload')
// JavaScript development.
var browserify = require('browserify')
var babelify = require('babelify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
// Less compilation.
var less = require('gulp-less')
// CSS compilation.
var concat = require('gulp-concat')
var cleanCSS = require('gulp-clean-css')
var concatCss = require('gulp-concat-css') // optional
// HTML compilation.
var htmlmin = require('gulp-htmlmin')
var path = require('path')
var foreach = require('gulp-foreach')
// Task to compile js.
gulp.task('compile-js', function () {
return browserify({
extensions: ['.js', '.jsx'],
entries: ['./javascripts/app.js'],
debug: true
})
.transform('babelify', {
presets: ['es2015', 'es2017', 'react'],
plugins: [
// Turn async functions into ES2015 generators
// https://babeljs.io/docs/plugins/transform-async-to-generator/
"transform-async-to-generator"
]
})
.bundle()
.pipe(source('bundle.min.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
// Task to compile less.
gulp.task('compile-less', function () {
return gulp.src([
'stylesheets/*.less'
])
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('stylesheets'))
})
// Task to minify css.
gulp.task('minify-css', function () {
return gulp.src([
'stylesheets/style.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS({debug: true}))
.pipe(concat('bundle.min.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
// Loop each html.
// https://www.npmjs.com/package/gulp-foreach
gulp.task('minify-html', function () {
return gulp.src('*.html')
.pipe(foreach(function(stream, file){
// Get the filename.
// https://github.com/mariusGundersen/gulp-flatMap/issues/4
// https://nodejs.org/api/path.html#path_path_basename_p_ext
var name = path.basename(file.path)
return stream
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(concat('min.' + name))
}))
.pipe(gulp.dest(''))
})
// Task to copy fonts to dist.
gulp.task('compile-fonts', function() {
return gulp.src([
'fonts/*',
'node_modules/material-design-icons/iconfont/MaterialIcons-Regular.*',
'node_modules/foundation-icon-fonts/foundation-icons.*',
])
.pipe(gulp.dest('dist/fonts/'))
})
// Task to copy images to dist.
gulp.task('compile-images', function() {
return gulp.src([
'images/*',
'node_modules/jquery-ui-bundle/images/*',
])
.pipe(gulp.dest('dist/images/'))
})
// Task to watch less & css changes.
gulp.task('watch', function () {
gulp.watch('javascripts/*.js', ['compile-js']) // Watch all the .js files, then run the js task
gulp.watch('stylesheets/*.less', ['compile-less']) // Watch all the .less files, then run the less task
gulp.watch('stylesheets/*.css', ['minify-css']) // Watch all the .css files, then run the css task
gulp.watch('stylesheets/*.css', ['compile-fonts']) // Watch all the .css files, then run the font task
gulp.watch('stylesheets/*.css', ['compile-images']) // Watch all the .css files, then run the image task
})
// Development:
// Task when running `gulp` from terminal.
gulp.task('default', ['watch'])
// Production:
// Task when running `gulp build` from terminal.
gulp.task('build', ['minify-css', 'compile-fonts', 'compile-js', 'minify-html'])
All you need to do is create a master less file and import all your less files.
So create, for example a file called master.less. Then edit this file by adding the follow instruction:
#import "functions.less";
#import "styles.less";
And thats it. Then the gulp-less does the rest!! :) It compiles al the code in one single css file.
My suggestion for your task is (this is the code i have in my project startup):
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
less = require('gulp-less'),
autoprefixer = require('autoprefixer');
concat = require('gulp-concat'),
cssnano = require('gulp-cssnano'),
browserSync = require('browser-sync');
gulp.task('less', function () {
var processors = [
autoprefixer,
cssnano
];
gulp.src(config.paths.less.src)
.pipe(less())
.pipe(postcss(processors))
.pipe(concat('bundle.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({stream:true}))
});
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
});
My github page's css is being generated as
http://name.github.io/project/assets/css/main.css, but in the index.html it points to http://name.github.io/assets/css/main.css
I am using Jekyll with Gulp and SASS. I know this would work fine on a real .com domain but how do I make it correct on GitHub Pages?
My gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var cp = require('child_process');
var jade = require('gulp-jade');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll.bat', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
}
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: ['css'],
onError: browserSync.notify
}))
.pipe(plumber())
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/assets/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css'));
});
/*
* trying to Gulp stuff
*/
gulp.task('jade', function() {
return gulp.src('_jadefiles/*.jade')
.pipe(jade())
.pipe(gulp.dest('_includes'));
})
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['sass']);
gulp.watch('assets/js/**', ['jekyll-rebuild']);
gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
gulp.watch(['assets/js/**'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
The _site folder is where all the generated HTML and CSS is. The only solution I can think of is moving the contents from the _site folder to the root of my git repo and deleting everything else that was there before.
In my _config.yml, the basedir is even set to baseurl: github-project-name but still doesn't load.
In _config.yml, set :
baseurl: /project
Then call your assets with :
<link rel="stylesheet" href="{{ "/assets/css/main.css, " | prepend: site.baseurl }}">
i have tried to configure sourcemaps in less files. When I inspect an Element I see the correct less file with the file extension. So it seems to work
But when I do changes the file name for Example style.less:1120 change to style.css:129
What went wrong?
Another problem is, that chrome shows me only the style.less file. This file imports only my components. So instead of seeing component.less:10 i see style.less:221
My gulpfile:
var gulp = require('gulp');
var less = require('gulp-less');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var paths = {
scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
images: 'client/img/**/*',
less: 'web/style/style.less'
};
gulp.task('less' , function() {
// Minify and copy all JavaScript (except vendor scripts)
// with sourcemaps all the way down
return gulp.src(paths.less)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(rename(function(path) {
path.extname = ".css";
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('web/style/.'));
});
// Rerun the task when a file changes
gulp.task('watch', function() {
gulp.watch(paths.less, ['less']);
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch']);
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