For some reason console.log and alert() functions don't seem to be working across any of my js files.
I'm using gulp to concatenate and compile a set of .js files (gulpfile.js below). I think this is where the problem lies as when I throw an alert or a console.log into an HTML page, they work fine.
// include gulp
var gulp = require('gulp');
// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var changed = require('gulp-changed');
//var notify = require('gulp-notify');
//var plumber = require('gulp-plumber');
// --------------------------------------------------------------
// JS
// ---------------------------------------------------------------
gulp.task('scripts', function() {
gulp.src(['./js/script.js'])
.pipe(include())
.pipe(concat('script-dist.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
// --------------------------------------------------------------
// Sass
// ---------------------------------------------------------------
gulp.task('styles', function() {
gulp.src('./ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./ui/css/'))
.pipe(livereload());
//.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
//.pipe(through(function () {
// this.emit("error", new Error("Something happened: Error message!"))
//}));
});
// --------------------------------------------------------------
// Watch & Reload
// ---------------------------------------------------------------
gulp.task('watch', function() {
gulp.watch('./ui/scss/*.scss', ['styles']);
gulp.watch(['./js/*.js', '!./js/vendor/**', '!./js/script-dist.js'], ['scripts']);
});
gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);
livereload.listen();
Solved it, it was gulp-strip-debug. It strips out all alerts and console.logs.
Commented that out and everything works fine.
Related
i have trouble to use Gulp 4. My watch-task runs only one time, when detecting changes, inside my html-files.
Where is my mistake? Please help me to fix my gulpfile
Here is my code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer'),
rename = require('gulp-rename'),
inject = require('gulp-inject'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
babel = require('gulp-babel'),
browserify = require('gulp-browserify'),
clean = require('gulp-clean'),
sourcemaps = require('gulp-sourcemaps'),
htmlmin = require('gulp-html-minifier'),
browserSync = require('browser-sync');
var src = './src/',
dist = './dist/';
//####################################
// MINIFY HTML
gulp.task('html', function(){
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
});
//####################################
// WATCH
gulp.task('default', function(){
gulp.watch([src + '*.html'], gulp.series('html'));
});
When i run the html-task manually, i get the following warning:
The following task did not complete: html
Did you forget to signal async completion?
How can i solve this issue, too?
I solved my issue, with this code change, inside my html file:
gulp.task('html', done => {
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
done();
});
The Watch-Task works now
There is a project, its structure:
I do run gulp watch, when changing sass-file everything works correctly , but when I change js-file - assembly going infinite.
gulpfile:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var compass = require('gulp-compass');
gulp.task('compress-js', function() {
return gulp.src([
'./www/js/jquery/**/*.js',
'./www/js/vendor/**/*.js',
'./www/js/lib/**/*.js',
'./www/js/common/app.js',
'./www/js/pages/**/*.js',
'./www/js/common/main.js',
'!./www/js/combine.js'
])
.pipe(concat('combine.js'))
.pipe(uglify())
.pipe(gulp.dest('./www/js/'));
});
gulp.task('compress-css', function() {
return gulp.src('./scss/**/*.scss')
.pipe(compass({
config_file: './scss/config.rb',
css: './www/css',
sass: './scss'
}))
.pipe(gulp.dest('./www/css/'));
});
gulp.task('watch', function() {
gulp.watch(['./scss/**/*.scss'], ['compress-css']);
gulp.watch(['./www/js/**/*.js'], ['compress-js']);
});
Tell me please, what is wrong here?
The problem seems in your gulp.watch
gulp.watch(['./www/js/**/*.js'], ['compress-js']);
When you concat the js files for the build you exclude combine.js but you take it as good for the watch so he loop
I generate CSS from LESS files and want to give to all generated Bootstrap CSS files a prefix "bootsrtap", but not to the bootstrap.css. So, I set the prefix directly after the compilation, but all my attempts to do a futher rename are failing.
var gulp = require('gulp'),
less = require('gulp-less'),
watch = require('gulp-watch'),
prefix = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
filter = require('gulp-filter'),
rename = require('gulp-rename'),
path = require('path')
;
// ...
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
.pipe(plumber())
.pipe(less())
.pipe(rename({prefix: 'bootstrap-'}))
.pipe(gulp.dest('./public/css')) // path to css directory
;
});
gulp.task('clean-up', function() {
// const bootstrapFileRenameFilter = filter(['*', 'bootstrap-bootstrap.css']);
gulp.src('./public/css/bootstrap-bootstrap.css')
.pipe(plumber())
// .pipe(bootstrapFileRenameFilter)
.pipe(rename({basename: 'bootstrap.css'}))
.pipe(gulp.dest('./public/css'))
;
});
gulp.task('watch', function() {
gulp.watch('public/less/*.less', ['build-less', 'build-vendors'])
});
// gulp.task('default', ['watch', 'build-less', 'build-vendors']);
gulp.task('default', ['build-less', 'build-vendors', 'clean-up']);
What I expect:
./public/css/bootstrap-theme.css
./public/css/bootstrap.css
What I'm currently getting:
./public/css/bootstrap-theme.css
./public/css/bootstrap-bootstrap.css
How to rename a single file from a.foo to b.bar?
gulp-rename accepts a function as an argument to do the renaming. This allows you to target specific files for renaming using any criteria you like. In your case:
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less',
'./public/components/bootstrap/less/bootstrap.less'])
.pipe(plumber())
.pipe(less())
.pipe(rename(function(path) {
//rename all files except 'bootstrap.css'
if (path.basename + path.extname !== 'bootstrap.css') {
path.basename = 'bootstrap-' + path.basename;
}
}))
.pipe(gulp.dest('./public/css'));
});
Since you now only rename those files where you actually want to have the bootstrap- prefix, you don't have to clean-up your mess afterwards and can just drop the whole clean task altogether.
I am using gulp for the first time and obviously got 2 problems as follows
First here goes my gulp file, it is very basic nothing fancy yet.
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('controllers', function() {
return gulp.src('controllers/*.js')
.pipe(concat(EVER_FILE))
.pipe(gulp.dest('dist'))
.pipe(rename(EVER_FILE))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['scripts','controllers']);
Question 1: How do i get the controllers task to concat and minify each file on its own?
Question 2: How do i create a task that can add a random number in the index.html Javascript files as in <script src='js/controller.js?RandomNumber'></script>
This question already has an answer here:
Why does gulp.src not like being passed an array of complete paths to files?
(1 answer)
Closed 7 years ago.
I have a gulp.js configuration set up to automatically compile my SASS and CoffeeScript on save. It works, except that the relative paths are totally lost, and all the files are output into a single flat directory. I would like to retain the sub-directory structure of my app/assets/sass and app/assets/coffee directories when the final CSS and JS files are compiled. Here is my gulpfile:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
var coffee = require('gulp-coffee');
var sassDir = 'app/assets/sass';
var coffeeDir = 'app/assets/coffee';
gulp.task('sass', function() {
return gulp.src(sassDir + '/**/*.scss')
.pipe(plumber())
.pipe(sass({ style: 'compress' }).on('error', gutil.log))
.pipe(autoprefixer('last 10 versions'))
.pipe(minifycss())
.pipe(gulp.dest('public/css'));
});
gulp.task('coffee', function() {
return gulp.src(coffeeDir + '/**/*.coffee')
.pipe(plumber())
.pipe(coffee({ bare: true }).on('error', gutil.log))
.pipe(gulp.dest('public/js/coffee)'));
});
gulp.task('watch', function() {
gulp.watch(sassDir + '/**/*.scss', ['sass']);
gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']);
});
gulp.task('default', ['sass', 'coffee', 'watch']);
only split path string with / and get the last which is the filename and extension and then cut it
to get files path
gulp.task('testing', function() {
var orginalFile="tt/ee/style.scss";
var pathArray=orginalFile.split('/');
var destination=orginalFile.replace(pathArray[pathArray.length-1],"")
gulp.src(orginalFile)
.pipe(sass())
.pipe(gulp.dest(destination));
})
});