I am using Gulp to concatenate/minify all JS/CSS files from the bower folder (using main-bower-files) and src folder respectively. I am using gulp-load-plugins to load the following dependencies from package.json (all of which exist in node_modules):
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-filter": "^4.0.0",
"gulp-load-plugins": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"main-bower-files": "^2.13.1"
}
Here is the gulpfile.js:
// Include Gulp
var gulp = require('gulp');
var src = 'src/';
var dest = 'public/';
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
replaceString: /\bgulp[\-.]/
});
//Concat + Minify JS
gulp.task('js', function() {
var jsFiles = ['/src/js/*'];
gulp.src(plugins.mainBowerFiles().concat(jsFiles))
.pipe(plugins.filter('*.js'))
.pipe(plugins.concat('main.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest('public/js'));
});
//Concat + Minify CSS
gulp.task('css', function() {
var cssFiles = ['src/css/*'];
gulp.src(plugins.mainBowerFiles().concat(cssFiles))
.pipe(plugins.filter('*.css'))
.pipe(plugins.concat('main.min.css'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'css'));
});
// Default Task
gulp.task('default', ['js','css']);
Gulp is not providing any errors in the console but neither the JS nor CSS file is being created.
Ultimately the issue narrowed down to gulp-filter not returning any files. For anyone who is attempting a similar setup, I ended up taking a slightly alternate path by using mainBowerFiles to filter the files which achieved the same end result:
// Include Gulp
var gulp = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
replaceString: /\bgulp[\-.]/
});
var src = 'src/';
var dest = 'public/';
//Concat + Minify JS
gulp.task('test', function() {
console.log(plugins);
});
//Concat + Minify JS
gulp.task('js', function() {
var jsFiles = ['src/js/*'];
gulp.src(plugins.mainBowerFiles('**/*.js').concat(jsFiles))
.pipe(plugins.concat('main.min.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'js'));
});
gulp.task('css', function() {
var cssFiles = ['src/css/*'];
gulp.src(plugins.mainBowerFiles('**/*.css', {
overrides: {
bootstrap: {
main: [
'./dist/css/bootstrap.min.css'
]
}
}
}).concat(cssFiles))
.pipe(plugins.concat('main.min.css'))
.pipe(plugins.cleanCss())
.pipe(gulp.dest(dest + 'css'));
});
// Default Task
gulp.task('default', ['js','css']);
I had the exact same issue and turns out the 'gulp-filter' was not working because of this line:
.pipe(plugins.filter('*.js'))
It should be the following:
.pipe(plugins.filter('**/*.js'))
The same should happen with the CSS and it works fine.
Related
I have problem. Yestrday I had to update the Node.js kernel and now that I change something in the LESS file, there will be no css update. Gulpfile is the same as before the update. Could someone advise me what's wrong with my gulpfile script?
The HTML file update is OK.
//*********** IMPORTS *****************
var gulp = require('gulp'),
browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat-css');
var cssmin = require('gulp-cssmin');
/* BROWSERSYNC */
gulp.task('browserSync', function () {
var files = ['orient-spa/**'];
browserSync.init(files, {
server: {
baseDir: 'orient-spa/',
index: 'index.html'
},
logPrefix: 'OS01',
browser: ['chrome']
});
});
gulp.task('css', function () {
var processors = [
autoprefixer
];
return gulp.src('./orient-spa/skins/less/index-files.less')
.pipe(less())
.pipe(postcss(processors))
.pipe(gulp.dest('./orient-spa/skins/css/'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./orient-spa/skins/less/*.less', ['css']);
gulp.watch('./orient-spa/skins/css/*.css', ['concatMinify']);
});
gulp.task('concatMinify', function () {
return gulp.src('./orient-spa/skins/css/*.css')
.pipe(concat("index.css"))
.pipe(cssmin())
.pipe(gulp.dest('./orient-spa/skins/css/compiled'))
.pipe(livereload());
});
gulp.task('default', ['browserSync', 'watch', 'css', 'concatMinify']);
Thanks for your advice :-)
I try this path, but problem remains.
Last version node.js was Node.js 7.2.1 (Node.js), now Node.js 9.8.0.
I attach an image to the console after changing 1 line in the LESS file.
Here I see that the set of commands does not call correctly. Or they are called repeatedly. Do not you see a mistake here, please?
Thanks for your advice
I have gulpfile.js from https://github.com/gulpjs/gulp.
I just change folders name for mine.
Task 'gulp' work normally, first 'gulp watch' too. But any another save any less file don't do anything. Just "Finished 'styles' after 1.34 s"
(JS works good)
Any advice?
main.less have less imports with all filles
Folders looks like:
/www
/js
/css
main.less
file.less
file2.less
/lib
file3.less
var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');
var paths = {
styles: {
src: 'www/css/main.less',
dest: 'www/css/'
},
scripts: {
src: 'www/js/js/**/*.js',
dest: 'www/js/'
}
};
function clean() {
return del([ 'assets' ]);
}
function styles() {
return gulp.src(paths.styles.src)
.pipe(less())
.pipe(cleanCSS())
// pass in options to the stream
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}
function scripts() {
return gulp.src(paths.scripts.src, { sourcemaps: true})
.pipe(babel())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
}
function watch() {
gulp.watch("www/js/js**/*.js", scripts);
gulp.watch("www/css/**/*.less", styles);
}
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
var build = gulp.series(clean, gulp.parallel(styles, scripts));
gulp.task('build', build);
gulp.task('default', build);
As #Jakub thought, you never actually call your watch task in the code you presented! You probably want something like this:
var build = gulp.series(clean, gulp.parallel(styles, scripts), watch);
So I want to connect browsersync to a site I don't have any control over. Basically I want it to replace a css file on the live site with a css file on my computer (which gets compiled from a bunch of less files). When that local css file is changed then browsersync should inject the css like it normally would. I'm using browsersync with gulp since I also want to have other tasks run.
The code below will open gulpjs.com and correctly match main.css from gulpjs.com and attempt to serve something in it's place. But all I'm getting is a 404 for the main.min.css. It's looking for it here
http://localhost:3000/css/main.min.css
I zipped up the test project (node modules not included) you can download it here - https://www.dropbox.com/s/5x5l6bbxlwthhoo/browsersyncTest.zip?dl=0
Here's what I have so far...
Project Structure
css/ main.min.css (compiled from app.less)
less/ app.less
gulpfile.js
package.json
package.json
{
"name": "browsersyncTest",
"devDependencies": {
"autoprefixer": "^6.7.0",
"browser-sync": "^2.18.6",
"cssnano": "^3.10.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-less": "^3.3.0",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^4.3.11"
}
}
gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var cleancss = require('gulp-clean-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();
gulp.task('default', function() {
});
gulp.task('less', function () {
var plugins = [autoprefixer({browsers: ['last 2 versions', 'ie >= 10']})];
return gulp.src('less/app.less')
.pipe(less())
.pipe(rename('main.min.css'))
//.pipe(postcss(plugins))
//.pipe(cleancss())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('watch', ['less'], function () {
browserSync.init({
proxy: "http://gulpjs.com/",
files: ['css/**'],
serveStatic: ['css'],
rewriteRules: [{
match: new RegExp('css/main.css'),
fn: function() {
return 'css/main.min.css';
}
}]
});
gulp.watch('less/**/*.less', ['less']);
});
Thanks a bunch!
Got it all figured out.
Here's the updated code.
browserSync.init({
proxy: "http://gulpjs.com/",
rewriteRules: [
{
match: new RegExp("css/main.css"),
fn: function() {
return "main.min.css"
}
}
],
files: "css/*.css",
serveStatic: ['./css']
});
I'm trying to get my Gulp File working.
Currently it isn't detecting any of my html, sass or JS changes. SASS and JS isn't compiling into the assets folder - this was working until I began to use browserSync... I did have it detecting the html changes but now that isn't working either after I tried to make my gulpfile more efficient.
I need some experienced eyes to see what am I doing wrong below...
package.json
{
"devDependencies": {
"gulp": "latest",
"gulp-util": "latest",
"gulp-sass": "latest",
"gulp-uglify": "latest",
"gulp-concat": "latest",
"gulp-connect-php": "latest",
"gulp-rename": "latest",
"browser-sync": "latest"
}
}
gulpfile.js
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
// Change these values
var jsSources = ['assets/scripts/*.js'],
sassSources = ['assets/sass/*.scss'],
sassSources = ['**/*.php'],
outputDir = 'assets',
virtualHost = 'annual-review-2016.dev';
// Log Errors
gulp.task('log', function() {
gutil.log('== My Log Task ==')
});
// Manage CSS
gulp.task('sass', function() {
gulp.src('sassSources')
.pipe(sass({style: 'expanded'}))
.pipe(concat('app.css'))
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'))
});
// Manage JS
gulp.task('js', function(){
return gulp.src('jsSources')
.pipe(concat('app.js'))
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'));
});
// Live Reload in Browser
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
proxy: 'annual-review-2016.dev'
});
});
});
// Watch the Styles and Scripts on Save
gulp.task('watch', function() {
gulp.watch('sassSources', ['sass']);
gulp.watch('jsSources', ['js']);
gulp.watch('phpSources').on('change', function () {
browserSync.reload();
});
});
gulp.task('default', ['js', 'sass', 'connect-sync', 'watch']);
You have duplicate declaration of sassSources
You need to remove quotation mark in gulp.dest('outputDir'), otherwise gulp will write the output to /outputDir instead of /assets
And for auto-reloading you need to include .pipe(browserSync.reload({stream: true})); at the bottom of your pipe chain (under gulp.dest in 'sass' task for example).
I wanted to try gulp with sass and run into problems.
I have following sass directory:
main.scss //all custom styling
mixins.scss //custom mixins
variables.scss //custom variables
style.scss //file that imports all the above with bootstrap and fontawesome
When i run gulp, everything compiles and there are no errors, i get the correct sytle.min.css with all the styling included.
But then i change one of the watched files (main.scss || mixins.scss || variables.scss) I get one of the following errors: "undefined variable", "no mixin named ..." accordingly.
Also if I change and save main.scss i get no errors but none of the custom scss files get included into css, only bootstrap with fontawesome get compiled.
What is wrong with my setup?
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
notify = require("gulp-notify"),
concat = require('gulp-concat'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename')
bower = require('gulp-bower')
merge = require('merge-stream')
watch = require('gulp-watch');
var config = {
destPath: './dist',
sassPath: './src/sass',
jsPath: './src/js',
bowerDir: './src/components'
}
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest(config.bowerDir));
});
gulp.task('icons', function() {
var fontawesome = gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('./src/fonts'));
var bootstrap = gulp.src(config.bowerDir + '/bootstrap-sass/assets/fonts/bootstrap/**.*')
.pipe(gulp.dest('./src/fonts/bootstrap'));
return merge(fontawesome, bootstrap);
});
gulp.task('sass', function() {
console.log(config.sassPath);
var stream = gulp.src([config.sassPath + '/style.scss'])
.pipe(sass().on('error', sass.logError))
// .pipe(concat('style.css'))
.pipe(minifycss())
.pipe(rename('style.min.css'))
.pipe(gulp.dest(config.destPath));
return stream;
});
gulp.task('js', function() {
var stream = gulp.src([config.bowerDir + '/jquery/dist/jquery.js', config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js', config.jsPath + '/*.js'])
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename('script.min.js'))
.pipe(gulp.dest(config.destPath));
return stream;
});
gulp.task('watch', function(){
watch([config.sassPath + '/*.scss'], function(event, cb) {
gulp.start('sass');
});
watch([config.jsPath + '/*.js'], function(event, cb) {
gulp.start('js');
});
});
gulp.task('default', ['bower', 'icons', 'js','sass', 'watch']);
style.scss
#import "./variables.scss";
#import "./mixins.scss";
#import "../components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
#import "../components/font-awesome/scss/font-awesome.scss";
#import "./main.scss";
Ok, so I fixed it by adding timeout to my watch task before calling sass task:
watch([config.sassPath + '/*.scss'], function(event, cb) {
setTimeout(function(){
gulp.start('sass');
}, 1000);
});
It's either the IDE (sublime 2) on save delay or server ping problem.