I have the following gulpfile:
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var traceur = require('gulp-traceur');
var concat = require('gulp-concat');
var uglify = require('gulp-uglifyjs');
gulp.task('default', function () {
return gulp.src('src/*.js')
.pipe(sourcemaps.init())
.pipe(traceur())
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
When running this code i don't get a source map in the all.js file.
When i remove the line:
.pipe(uglify())
I get the source map but then my code is not uglified.
I tried to debug the code with gulp-utils but did not find anything out(how to debug gulp-sourcemaps not doing anything?).
How can this issue be fixed?
I changed 'gulp-uglifyjs' to 'gulp-uglify' and everything worked
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var traceur = require('gulp-traceur');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var gutil = require('gulp-util')
gulp.task('default', function () {
return gulp.src('src/*.js')
.pipe(sourcemaps.init().on('error', gutil.log))
.pipe(traceur())
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
Related
When i run this code
var watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scripts', function() {
gulp.src('./lib/*.js')
.pipe(watch('./lib/*.js'))
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});
this code builds without error but the program it is not finished
I checked out my project on a new machine and get an unsatisfying console output.
Console Output
gulp default
Using gulpfile ...\gulpfile.js
Task never defined: default
Please check the documentation for proper gulpfile formatting
gulp -v
CLI version 1.2.2
Local version 4.0.0-alpha.2
Settings
Node interpreter: nodejs-6.9.2\node.exe
Gulp package: node_modules\gulp-4.0.build
Gulp File Content
'use strict';
var gulp = require('gulp');
var del = require('del');
var path = require('path');
var sass = require('gulp-sass');
var ts = require('gulp-typescript');
var gulpPromise = require("gulp-promise");
var gulpPromiseAll = require('gulp-all');
var merge = require('merge-stream');
var through = require('through2');
var runSequence = require('run-sequence');
var async = require("async");
var Rx = require('rx');
var chok = require('chokidar');
var deleteEmpty = require('delete-empty');
var browserSync = require('browser-sync').create();
var webserver = require('gulp-webserver');
var historyApiFallback = require('connect-history-api-fallback');
/* A few functions like this */
var yadda1 = function() {
return yadda9("yadda", yaddayadda);
};
/* A few tasks like this */
gulp.task('build', function(){
return gulpPromiseAll(
yadda1(),
yadda2(),
yadda3()
).then(
function() {
console.log("yadda");
}, function(err) {
console.error("yadda:", err);
}
);
});
gulp.task('default', gulp.series('build', 'serve', function(done) {
console.log("Default task that cleans, builds and runs the application [END]");
done();
}));
What am I doing wrong?
I just had this problem.
We both are using browser-sync, and a task related to browser-sync is where the problem was in my code, so there's a good chance that you have the same problem (and possibly in your other gulp tasks as well), but can't say for sure because you didn't share the tasks' code.
The problem:
In gulp 3.x you could write code like this:
gulp.task('watch', () => {
gulp.watch('./dev/styles/**/*.scss', ['styles'];
...
});
You can't in gulp 4.x.
The solution:
You have to pass a function instead of the name of a task in these cases. You can do this by passing a gulp.series() function. The above code becomes:
gulp.task('watch', () => {
gulp.watch('./dev/styles/**/*.scss', gulp.series('styles'));
...
});
Try making this change wherever applicable. Worked for me.
I want to be able to send the browserSync external URL as a parameter for an external node script in my gulp file. How can I get at that external URL through the browserSync object (or some other way)?
var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
});
});
gulp.task('config', shell.task([
"node scripts/someNodeScript.js browserSync.externalURL"
]));
UPDATE
Based on the excellent answer by #sven-shoenung below, I slightly tweaked his solution and am successfully using this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
var browserSyncDone = function () {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'});
};
gulp.task('default', ['browser-sync']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
browserSyncDone();
});
});
You can use browserSync.getOptions('urls') to get a Map of all access URLs. It returns something like this:
Map {
"local": "http://localhost:3000",
"external": "http://192.168.0.125:3000",
"ui": "http://localhost:3001",
"ui-external": "http://192.168.0.125:3001"
}
Note that is only available after browser-sync is successfully initialized, so you need to pass a callback function to browserSync.init() or you'll try to get the value too soon.
You won't be able to use gulp-shell for the same reason. shell.task() will be set up before browser-sync has initialized, so browserSync.getOptions('urls') isn't available yet.
I recommend you use the standard nodejs child_process.spawn() instead.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function(done) {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
done();
});
});
gulp.task('config', ['browser-sync'], function(done) {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'}).on('close', done);
});
I need help adding source map to SASS compiler in the same CSS output folder. Till now, I got to install gulp-sourcemaps module within gulpfile.js but couldn't know success to bind sourcemaps.write as gulp.task.
Any help is much appreciated :)
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
},
proxy: {
target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port]
ws: true // enables websockets
}
});
});
gulp.task('sass', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/css'))
.pipe(bs.reload({
stream: true
}));
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch("*.php").on('change', bs.reload);
});
Try this code for gulp task 'sass':
gulp.task('sass', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/css'))
.pipe(bs.reload({
stream: true
}));
});
First init sourcemaps then compile sass() after that write sourcemap in the same folder ('.')
Regards
I'm using this task since 5 months everyday and works fine,
const gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps');
var sassSourcePath = 'YourPath/scss/**/*.scss',
cssDestPath = 'YourPath/css/';
gulp.task('sass', () => {
return gulp
.src(sassSourcePath)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(cssDestPath));
});
Also recommend you the require('gulp-csso') for the production version
A complete solution for gulp-sass, map, count all files, minify:
./sass/partial_folders/index.scss
#import 'base/_reset';
#import 'helpers/_variables';
#import 'helpers/_mixins';
#import 'helpers/_functions';
#import 'base/_typography';
etc..
./gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('styles', function(){
return gulp
.src('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(concat('styles.css'))
.pipe(uglifycss({
"maxLineLen": 80,
"uglyComments": true
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./build/css/'));
});
gulp.task('default', function(){
gulp.watch('sass/**/*.scss', ['styles']);
})
I'm using Ubuntu and it's work fine but when I run the gulp command I got a problem. The file was created but Gulp changes the file permissions and the browser can't read the file. So I can't navigate in my project website. =/
My gulpfile.js
var gulp = require('gulp');
//~ var gulp = require('gulp-util');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var src='./wp-content/themes/wikitricks';
var scripts=[
src + '/js/jquery.min.js',
src + '/js/jquery-ui.js',
src + '/js/jquery.tooltipster.min.js',
src + '/js/featherlight.min.js',
//~ src + '/js/jquery.masonry.min.js',
src + '/js/masonry.pkgd.min.js',
];
gulp.task('js', function() {
return gulp.src(scripts)
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest(src))
});
gulp.task('default', ['js'], function () {
gulp.watch(scripts, ['js']);
});
I found a solution but I still don't know why it happens...
var chmod = require('gulp-chmod');
gulp.task('copy-images', function() {
gulp.src(path_resource_images + '**/*.jpg')
.pipe(chmod(666))
.pipe(gulp.dest(path_app_images));
});
From:
Gulp - Handle read-only permissions for dest files?