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.
Related
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.
I'm new in Gulp and this is my code that just minifies my JS script:
gulp.task('minify-js', function(){
return gulp.src(['assets/js/**/*.js', '!assets/js/**/*.min.js'])
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/js'))
});
gulp.task('watch', function(){
//gulp.watch(['sass/**/*.sass'], gulp.series('css-files'));
gulp.watch(['assets/js/**/*.js'], gulp.series('minify-js'));
});
gulp.task('default', gulp.series('watch'));
When I run gulp default and edit any JS file, my task starts looping for no reason and the files keep being minified and merged aswell. Why? It should stop after one execution!
example:
*This code runs perfectly without the watch task
Any help?
Your destination file matches the mask of source files.
So Gulp process the file it just generated themself. And then again, and again.
Update: you've excluded the file in minify-js task, but not excluded in watch task. Set watch argument the same as for minify-js and that should help.
I'm using Gulp with wiredep. The output I get is not the right path to my files. I'd like to change the output of that path accordingly.
Current path:
<script src="../bower_components/angular/angular.js"></script>
Wanted outcome:
<script src="./vendors/angular.js"></script>
Current gulp task:
gulp.task('index', function() {
var target = gulp.src(files.app_files.target);
var sources = gulp.src(files.app_files.sources, {
read: false
});
// {caseSensitive: true }
return target
.pipe(inject(sources, {
ignorePath: 'app'
}))
.pipe(wiredep())
.pipe(gulp.dest('dist'));
});
wiredep is born to wire bower dependencies in your html.
Anyway you can set a programmatica acces to js like this
Programmatic Access
You can run wiredep without manipulating any files.
require('wiredep')();
...returns...
{
js: [
'paths/to/your/js/files.js',
'in/their/order/of/dependency.js'
],
css: [
'paths/to/your/css/files.css'
],
// etc.
}
as you can find in the doc
As advice, in dev phase there is nothing wrong using bower_dependencies as your "repo". In build phase, when you prepare for prduction environment you can use useref in combination with wiredep and then move your builded file where you want it
Got Browsersync to work with my Gulp file but I've really been struggling with getting browsersync to auto reload my static site when I make changes to the main.scss file. I've followed all the documentation on there webpage thoroughly and I still cant get page to auto refresh.
I know parts of my integration with gulp are working because when I run my default gulp task which is linked to the browser-sync task a browser window fires up with the server but when I make s simple change to my main.scss file nothing auto reloads. I have to manually refresh to see changes.
Here's my gulpfile..What am I missing in here?
// refferance gulp
var gulp = require('gulp');
// browser-sync
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// other packages installed
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');
// browser-sync task
gulp.task('browser-sync',['styles'] , function(){
browserSync.init({
server:'./'
});
gulp.watch('.//src/scss/*.scss',['styles']);
gulp.watch('.//*.html').on('change',browserSync.reload);
});
// scripts task
gulp.task('scripts', function(){
// fetch all files in the .js extension in the /src/js directory
return gulp.src('./src/js/*.js')
// concatenate files and save as app.js
.pipe(concat('app.js'))
// save app.js in dest directory
.pipe(gulp.dest('./dest/js/'))
.pipe(uglify())
// minfiy file and rename to app.min.js
.pipe(rename({
suffix: '.min'
}))
// save in dest directory
.pipe(gulp.dest('./dest/js'));
});
// styles task
gulp.task('styles', function(){
// fetch all files with scss extension in /src/scss directory
return gulp.src('./src/scss/*.scss')
// compile scss
.pipe(scss())
// output css in css dest directory
.pipe(gulp.dest('./dest/css/'))
// minify css
.pipe(cssmin())
// rename as styles.min.css
.pipe(rename({
suffix: '.min'
}))
// save in same directory
.pipe(gulp.dest('./dest/css'))
// reload browser by injecting css into browser via browsersync
// .pipe(reload({stream:true}));
.pipe(browserSync.stream());
});
gulp.watch('./src/js/*.js', ['scripts']);
// we use the watch task in the default task bellow
gulp.task('watch',function(){
// watch js
gulp.watch('./src/js/*.js',['scripts']);
// watch scss
gulp.watch('./src/scss/*.scss',['styles']);
});
// default task allows us to run all tasks at once by just running `gulp` in command line
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']);
If you take out
gulp.watch('.//src/scss/*.scss',['styles']);
gulp.watch('.//*.html').on('change',browserSync.reload);
and replace with
gulp.watch('dest/**/*.html').on('change', browserSync.reload);
you should see changes providing that you are looking at a HTML file located under the dest directory.
I would also check that your styles and scripts tasks are firing. You should see this in the terminal/cli. If they are firing, any reload will also be logged too.
Hope that helps you out!
I need to minify automatically all files when some change occurs in my js or less files.
I have some Tasks for Minify my less files and js files called 'styles','services' and 'controlles'.
For minify this files i just execute this task and everything forks fine:
gulp.task('minify', ['styles', 'services','controllers']);
Instead run this task manually i want to do automatic in development mode. How i can do this?
What you need to do is run your project with nodemon
nodemon = require('gulp-nodemon');
Nodemon runs your code and automatically restart when your code changes.
So, for automatic minification use this Gulp Task:
gulp.task('watch', function() {
gulp.watch(pathLess, ['styles']);
gulp.watch(pathJs.services, ['services']);
gulp.watch(pathJs.controllers, ['controllers']);
});
And then setup nodemon for run your project
gulp.task('nodemon', function () {
nodemon({ script: 'server.js'})
.on('start', ['watch'], function () {
console.log('start!');
})
.on('change', ['watch'], function () {
console.log('change!');
})
.on('restart', function () {
console.log('restarted!');
});
})
Now if you type in prompt : gulp nodemon your server.js will run, and you will be able to develop with automatic minification.
I hope it helps