Input:
gulp.js
var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
return gulp.src('src/less/style.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'))
});
package.json
{
"devDependencies": {
"gulp": "~3",
"gulp-less": "~1.1.10"
},
"dependencies": {
"gulp-sourcemaps": "^2.6.4"
}
}
src/less/style.less have a lot of imports only, any styles.
gulp less generated to map file and /*# sourceMappingURL=style.css.map */ in the end of the file exists, but I don't see and links to actual less files in Crome Dev Tools and the content of map file is not looks like on file content generated by Grunt:
{"version":3,"names":[],"mappings":"","sources":["style.less"],"sourcesContent":["// MaxA styles\r\n#import (reference) 'base/_mixins';\r\n#import (reference) 'base/_variables';\r\n#import \"layout/_base.less\";\r\n\r\n// Magento\r\n#import \"magento\";\r\n//font\r\n#import \"font\";\r\n// Reset\r\n#import \"normalize\";\r\n#import \"print\";\r\n// Core CSS\r\n#import \"scaffolding\";\r\n#import .............................
Any ideas?
Thanks.
Related
I'm facing a 'randomly' occurring fatal error whilst using a watch task for gulp.
General setup
I'm on Windows 10, in which I host a Debian VM using VMWare. I have a network mapping directly into the app folder on the web server. As IDE, I use Atom, where I have opened said folder. This way, I'm directly working on the web server so that my many code changes do not require a deploy step.
Error
My build task is driven by gulp. Let me first show the error I'm facing:
W:\jd5>gulp watch
[16:21:10] Using gulpfile W:\jd5\gulpfile.js
[16:21:10] Starting 'watch'...
[16:21:11] 'watch' errored after 1.35 s
[16:21:11] Error: watch W:\jd5\src\js\vendor\ UNKNOWN
at _errnoException (util.js:1022:11)
at FSWatcher.start (fs.js:1374:19)
at Object.fs.watch (fs.js:1400:11)
at Gaze._watchDir (W:\jd5\node_modules\gaze\lib\gaze.js:289:30)
at W:\jd5\node_modules\gaze\lib\gaze.js:358:10
at iterate (W:\jd5\node_modules\gaze\lib\helper.js:52:5)
at W:\jd5\node_modules\gaze\lib\helper.js:61:11
at W:\jd5\node_modules\gaze\lib\gaze.js:420:5
at iterate (W:\jd5\node_modules\gaze\lib\helper.js:52:5)
at W:\jd5\node_modules\gaze\lib\helper.js:61:11
events.js:183
throw er; // Unhandled 'error' event
^
Regarding the randomness of this error: I often face it when starting watch, but sometimes not. It's at about 50% fail rate. Sometimes I can develop an entire day without it occurring. It's a frustrating error as it completely blocks my workflow, and it only mentions "UNKNOWN".
Gulp task
This is the gulp file I currently use:
/* load plugins */
var gulp = require('gulp');
// fast libsass-based SCSS parser
var sass = require('gulp-sass');
var del = require('del');
/* note that nano has a built-in auto prefixer, which we will use */
var nano = require('gulp-cssnano');
var gzip = require('gulp-gzip');
var minify = require('gulp-minify');
var babel = require("gulp-babel");
var sourcemaps = require('gulp-sourcemaps');
/* browser definition will be used by auto prefixer */
var myBrowsers = [
'last 2 versions',
'safari >= 8'
];
/* delete previously built files */
gulp.task('clean', function(cb) {
del(['public/css/*.css', 'public/js/**/*.js'], cb);
});
/* STYLES
================================================================================
*/
/* compile SCSS styles into CSS */
gulp.task('styles', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(nano({
autoprefixer: {
browsers: myBrowsers,
add: true
}
}))
.pipe(gzip({
append: false
}))
.pipe(gulp.dest('public/css'));
});
/* SCRIPTS
================================================================================
*/
gulp.task('scripts', function() {
gulp.start('scripts_global', 'scripts_vendor', 'scripts_modules')
.on('error', function(err) {
console.error('Error', err.message);
});
});
/* src/js/*.js > these are global scripts. minify, gzip and move to public/js/*.js */
gulp.task('scripts_global', function() {
return gulp.src('src/js/*.js')
.pipe(minify({
ext: {
min: '.min.js'
}
}))
.pipe(gzip({
append: false
}))
.pipe(gulp.dest('public/js/'));
});
/* src/js/vendor/*.js > vendor scripts should already be minimized, so gzip and move to public/js/vendor/*.js */
gulp.task('scripts_vendor', function() {
return gulp.src('src/js/vendor/*.js')
.pipe(gzip({
append: false
}))
.pipe(gulp.dest('public/js/vendor/'));
});
/* src/js/modules/*.js > module scripts should be transpiled to systemjs compatible modules, towards public/js/modules/*.js */
gulp.task("scripts_modules", function() {
return gulp.src("src/js/modules/*.js")
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(sourcemaps.write('.'))
.pipe(gzip({
append: false
}))
.pipe(gulp.dest("public/js/modules"));
});
/* default task: first clean, then run styles and scripts build tasks */
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts');
});
/* watch task to continuously build styles and scripts as they change in src dir */
gulp.task('watch', function() {
// watch .scss files
gulp.watch('src/scss/**/*.scss', ['styles']);
// watch .js files
gulp.watch('src/js/**/*.js', ['scripts']);
});
As the error itself provides no information on a possible cause, some speculations:
I consider it unlikely to be a permission problem on some file, because those would always fail, not just sometimes.
I am considering both Atom and this process touching files at the same time, but have no evidence for it, nor would I know how to prevent it. The process also sometimes fails with Atom not even open.
Note that running the individual tasks without watch (gulp styles, gulp scripts) works just fine, so the task themselves look OK, more likely I'm making a mistake in how they are linked up, but I don't know what it is.
I'm on Node v8.9.4. Here are the relevant parts of my package.json:
{
"name": "",
"version": "",
"description": "",
"author": "F",
"license": "",
"devDependencies": {
"babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-cssnano": "^2.1.3",
"gulp-gzip": "^1.4.0",
"gulp-minify": "0.0.15",
"gulp-sass": "^3.2.1",
"gulp-sourcemaps": "^2.6.0"
},
"dependencies": {
"del": "^2.2.2",
"eslint": "^4.19.1"
}
}
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).
Recently, there is something going wrong with my project and i don't know where am i wrong? so need a fresh look and a help.
The issue is that when i run gulp my stylus task compiles fine (I see changes in css) but it doesn't reload in chrome automatically. I have chrome extension (livepage) and all nesessary plugins were installed locally with npm.
I tested another one which is most same and that works fine.
here is my gulpfile :
var gulp = require('gulp'),
stylus = require('gulp-stylus'),
jade = require('gulp-jade'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch');
//- JADE
gulp.task('jade', function(){
return gulp.src('app/jade/*.jade')
.pipe(plumber())
.pipe(jade({pretty:true}))
.pipe(gulp.dest('build'))
});
//- CSS
gulp.task('css', function(){
return gulp.src('app/stylus/*.styl')
.pipe(plumber())
.pipe(stylus())
.pipe(gulp.dest('build/css'))
});
//- WATCH
gulp.task('watch', function(){
gulp.watch('app/stylus/*.styl', ['css']);
gulp.watch('app/jade/*.jade', ['jade']);
});
//- DEFAULT
gulp.task('default', ['jade', 'css', 'watch']);
json :
{
"name": "newone",
"version": "1.0.0",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-jade": "^1.1.0",
"gulp-plumber": "^1.0.1",
"gulp-stylus": "^2.0.6",
"gulp-watch": "^4.3.5"
}
}
project tree
newone
| app
| jade
index.jade
| stylus
style.styl
| build
| css
style.css
index.html
so, any advice? thank you...
Just use Browser-Sync for live reloading, it's awesome!
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var stylus = require('gulp-stylus');
// Static Server + watching styl/html files
gulp.task('serve', ['stylus'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/stylus/*.styl", ['stylus']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('stylus', function() {
return gulp.src("app/stylus/*.styl")
.pipe(stylus())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Good luck!
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