We Keep Coding

How do I make a min file in the same path or dest on gulp-rename and gulp-uglify?

Hi everyone I hope you having a great day, I'm trying to find a way on how do I make a min file in the same path or gulp.dest() on gulp(gulp-uglify and gulp-rename). In my code below when I run my gulp it keeps on creating *.min.js , *.min.min.js , *.min.min.min.js so on and so forth unless I stop the terminal. How do I make my gulp create only one *.min.js at the same time it uglify's. I hope everyone can help me with this one. Thank You.
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(uglify())
.pipe(rename( {suffix: '.min'} ))
.pipe(gulp.dest('./src/js/'))
.pipe(browserSync.stream());
});
gulp.task('browserSync', function(){
browserSync.init({
server : {
baseDir : './'
}
});
gulp.watch('./src/js/**.js', gulp.series('scripts'));
});
gulp.task('default', gulp.series('scripts', 'browserSync'));

This is happening because your scripts task is outputting the files to the same directory as you are watching:
.pipe(gulp.dest('./src/js/'))
and
gulp.watch('./src/js/**.js', gulp.series('scripts'));
So every time scripts runs and saves to that directory it triggers your watch again which fires scripts, etc., etc.
So either save your .min's to a directory you are not watching or don't watch .min files.
BTW, change to gulp.watch('./src/js/*.js', gulp.series('scripts')); // removed one asterisk
gulp.watch(['./src/js/*.js', '!./src/js/*.min.js'], gulp.series('scripts')); //
might work - untested though.

Gulp Watch doesn't detect changing in SASS SCSS folder

I have set up Gulp for the first time to compile SCSS to CSS using NanoCSS and gulp-css.
I have created a do-sass that successfully compiles SCSS and minifies the CSS.
However, when I place this in a watch task, it does not work.
If I change any of my SCSS files the do-sass command does not run. Can anyone tell me what I have done wrong?
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
gulp.task('sass', function(){
return gulp.src('scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('./'))
});
// Minifys .css and reload browser.
gulp.task('mini-css', function() {
return gulp.src('styles.css')
.pipe(cssnano())
.pipe(gulp.dest('./'));
});
// Compile and minify css.
gulp.task('do-sass', gulp.series('sass', 'mini-css'));
gulp.task('watch', function(){
gulp.watch('scss/*/.scss', gulp.series('do-sass'));
});

The glob pattern used by your watch task is probably incorrect: scss/*/.scss will not look for the SCSS files you want, because it will try to traverse one more directory deeper and look for files that are named .scss (without any file name, just the extension).
What you want is to use the double-star syntax, if you want to glob any SCSS files that are nested at any level:
scss/**/*.scss
Therefore, if you update your watch task as such, it should work:
gulp.task('watch', function(){
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
});

gulp.src from a separate file doesnt work

I am trying to write a gulpfile as follows :
var gulp = require('gulp');
// other dependencies go here ....
// source of files
var inputs = require('./asset_source.js');
// a simple task
gulp.task('css', function () {
gulp.src(inputs.css)
.pipe(debug())
.pipe(plumber())
.pipe(maps.init())
.pipe(concatCss('libs.css'))
.pipe(maps.write('../srcmaps'))
.pipe(plumber.stop())
.pipe(gulp.dest('assets/css'));
});
// the watcher
gulp.task('watch', function () {
gulp.watch('./asset_source.js', ['css']);
});
// default task
gulp.task('default', ['browser-sync', 'watch']);
And the source of assets (asset_source.js) file is something like this :
module.exports = {
css: [
'path/to/a/file.css',
'path/to/another/file.css',
.......
.......
],
js: [
'path/to/a/file.js',
'path/to/another/file.js',
.......
.......
]
};
Now I run the app with by just typing gulp in the console and it starts in a browser thanks to browsersync. I have all the css,scss,js assets listed in the asset_source.js file which is in the same directory as the gulpfile.js. What I want to achieve is if I append or remove a value to/from either of the arrays in asset_source.js, the concerned task should run while the gulp is already running. In this case css should be running on any change to asset_source.js with its updated content.
But instead it doesnt do so. Even if there is a change in the asset_source file, gulp uses the initial content and runs the task. However if run gulp css in a separate terminal, it works.
Please help me where I am going wrong or if it is even possible. Thanks.

gulp error with formatting

I am learning to use gulp and have followed through a tutorial. I am trying to concat js files my code is:
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task["concatScripts", function() {
return gulp.src(['js/jquery.js',
'js/foundation.equalizer.js', 'js/foundation.reveal.js'])
.pipe(concat("app.js"))
.pip(gulp.dest("js"));
}];
my error code is:
$ gulp concatScripts
[21:33:21] Using gulpfile ~\Documents\Treehouse notes\website-optimization\work\gulpfile.js
[21:33:21] Task 'concatScripts' is not in your gulpfile
[21:33:21] Please check the documentation for proper gulpfile formatting
Can anyone see where I am going wrong? Also it did not state to, however I linked the gulp.js file to write the code for gulp in to my html, is this correct?
Thank you in advance.

Check the documentation at gulp-concat and the code example: Instead of calling gulp.task[' you should make a function call:
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('concatScripts', function() {
return gulp.src('./js/*.js') // <-- Or an array of files
.pipe(concat('app.js'))
.pipe(gulp.dest('./js/'));
});

Error No such file or directory during Gulp-Ruby-Sass Task

I'm using Gulp as my task runner, and gulp-ruby-sass to compile my sass files into css.
The error I'm getting on my gulp default task:
My default Gulp task:
gulp.task('default', ['delete', 'web_css', 'dash_css', 'web_js', 'dash_js']);
My 2 compile SASS tasks:
// Compile public SASS
gulp.task('web_css', function() {
return sass('client/website/_sources/sass/bitage_web.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/website/assets/css'));
});
// Compile dashboard SASS
gulp.task('dash_css', function() {
return sass('client/dashboard/_sources/sass/bitage_app.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/dashboard/assets/css'));
});
Both tasks above are virtually identically.
When I run the default task (gulp):
The website css compiles ok
All the js compiles ok
But then I get that error before the dash_css finishes, and the
css is not compiled :(
Additional notes:
If make a change in gulp watch the dash_css will compile just
fine.
If I run just gulp dash_css it also compiles just fine.
I only have this Errno::ENOENT bug when I run the default task.
Do you see anything strange above? Or have run into this issue before?

Use callback so that gulp knows when the task is complete:
gulp.task('delete', function(cb) {
del([
'client/website/assets/css/maps',
'client/website/assets/css/bitage_web.css',
'client/dashboard/assets/css/maps',
'client/dashboard/assets/css/bitage_app.css',
'client/website/assets/js/*',
'client/dashboard/assets/js/*'
], cb);
});
Make delete run before other tasks for example with run-sequence.

I've changed
gulp.task('web_css', function() {
return sass(....
to:
gulp.task('web_css', function() {
return gulp.src('