I know there's lots of post about this but I can't find a solution.
This is my gulpfile that I tried to refactor but without success so trying here to get some answers. Tried everything I found about Gulp 3 -> Gulp 4 but nothing works. Maybe someone had a similar setup that needed conversion?
It was a long time ago since I touched this code and I feel a bit lost with Gulp right now.
return gulp.src('app/src/files/**/*.pdf')
.pipe(gulp.dest(dist + '/files'))
});
gulp.icons ({
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});
gulp.css({
const processors = [
atImport,
cssnext,
mqpacker,
clearfix,
cssnano
];
return gulp.src('app/src/css/*.css')
.pipe(postcss(processors))
.pipe(rename('main.min.css'))
.pipe(gulp.dest(dist));
});
gulp.nunjucks({
return gulp.src('app/pages/*.njk')
// Adding data to Nunjucks
.pipe(data(function () {
return require('./data.json')
}))
.pipe(nunjucksRender({
path: ['app/pages/', 'app/templates/'] // String or Array
}))
.pipe(gulp.dest(dist));
});
gulp.browser-sync({
browserSync({
server: {
baseDir: dist
}
});
});
gulp.scripts({
return gulp.src('app/src/js/**/*.js')
.pipe(concat('main.js'))
.pipe(rename('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest(dist))
.pipe(reload({stream: true}));
});
gulp.images({
return gulp.src('app/src/img/**/*')
.pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true}))
.pipe(gulp.dest('${dist}/img'))
});
gulp.watch({
gulp.watch('app/templates/**/*.+(njk)', ['nunjucks', reload]);
gulp.watch('app/**/*.+(njk)', ['nunjucks', reload]);
gulp.watch('app/src/**/*.css', ['css', reload]);
gulp.watch(['app/src/js/**/*.js', 'main.js'], ['scripts', reload]);
gulp.watch('app/src/img/**/*', ['images', reload]);
gulp.watch('app/src/icons/**/*', ['icons', reload]);
});
gulp.task('default', gulp.parallel('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));
gulp.task('build', gulp.parallel('nunjucks', 'files', 'css', 'scripts', 'icons', 'images'));```
This form is wrong:
gulp.icons ({
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});
change all to :
gulp.task('icons', function() {
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});
And all your watch statements are wrong, change all of them to this form:
gulp.watch('app/templates/**/*.+(njk)', gulp.series('nunjucks', reload));
You don't show the reload function so I assume it is a function and not in the gulp.task('reload') form??
I would also change this:
gulp.task('default', gulp.parallel('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));
since you call browser-sync last, gulp.series would be better so that the other tasks have completed on first run and their changes will be shown in the browser on first run:
gulp.task('default', gulp.series('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));
Related
i have a problem with my gulp.
Its works fine and its really fast but Gulp is compiling all js files in my project...
my gulp-watch:
gulp.task('watch', function () {
gulp.watch(sassFilesWatch, ['styles']);
gulp.watch(jsFilesWatch, ['uglify'])
});
My array:
var jsFilesWatch = [
'clients/*/template/lib/jscripts/*.js',
'clients/*/template/modules/**/*.js',
'system/lib/jscripts/*.js',
'system/mod/**/*.js',
'clients/core/modules/**/*.js',
'!/**/*.min.js'
];
Thats my function:
gulp.task('uglify', function(){
pump([
gulp.src(jsFilesWatch, {
base: './'
}),
debug({
title: 'Compiled',
showFiles: false,
}),
uglify(),
rename({ suffix: '.min' }),
gulp.dest('./')
]);
});
And thats the output:
Output
Just my saved file should be compiled
how can i do that?
thanks alot
It seems all your files with .js extensions are
being debugged, uglified and minified.
Which saved file are you trying to compile?
**/*.js uses the gulp command to watch all files with the .js extension in all folders.
You could use .pipe()
var uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js', function() {
gulp.src('scripts/*.js')
.pipe(uglify())
.pipe(concat('script.js'))
.pipe(gulp.dest('assets'))
});
Have a look into this Plugin, That will solve your problem
https://www.npmjs.com/package/gulp-changed
Try Changing your task to,
gulp.task('uglify', function(){
pump([
gulp.src(jsFilesWatch, {
base: './'
}),
changed('dist'),
ngAnnotate(),
debug({
title: 'Compiled',
showFiles: false,
}),
uglify(),
rename({ suffix: '.min' }),
gulp.dest('./')
]);
});
Note: this might run all your .js files at first time after you run your task, but it will identify the changed file on subsequent runs
Inside my gulp task, I want to fire reload my browser using browserSync.reload after the tasks have been finished. Currently my gulpfile.js looks like this:
gulp.task('serve', ['build'], function () {
browserSync.init({
notify: false,
server: "./" + dist
});
gulp.watch("/**/*.html", ['html']).on('change', browserSync.reload);
gulp.watch("/**/*.md", ['html']).on('change', browserSync.reload);
});
Currently the first thing gulp does is [BS] Reloading Browsers... and then [12:54:12] Starting 'html'....
How can I change this to first run html and on finish browserSync.reload?
gulp.task('reload', function (done) {
browserSync.reload();
done();
});
gulp.task('bs', function() {
browserSync.init({
proxy: "http://strona.pl/"
});
gulp.watch("./css/*.scss", gulp.series('sass', 'deploy', 'reload'));
gulp.watch('./**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
I think you don't need the on.change listener, you can specify the reload like this:
gulp.task('serve', ['build'], function () {
browserSync.init({
notify: false,
server: "./" + dist
});
gulp.watch("/**/*.html", ['html', browserSync.reload]);
gulp.watch("/**/*.md", ['html', browserSync.reload]);
});
EDIT
As Mark said, running both tasks in parrallel could generate some errors, a better solution could be:
gulp.task('serve', ['build'], function () {
browserSync.init({
notify: false,
server: "./" + dist
});
gulp.watch("/**/*.html", ['reload']);
gulp.watch("/**/*.md", ['reload']);
});
gulp.task('reload', ['html'], function () {
browserSync.reload();
});
I'm using browsersync with Gulp, running some tasks on particular filechanges. Whenever I save a file, I get 10+ [BS] Reloading Browsers... in my terminal and performance is understandably laggy.
Here are my gulpfile:
gulp.task('bowerJS', function() {
gulp.src(lib.ext('js').files)
.pipe(concat('lib.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/assets/js'));
});
gulp.task('bowerCSS', function() {
gulp.src(lib.ext('css').files)
.pipe(concat('lib.min.css'))
.pipe(gulp.dest('app/assets/css/'));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('less', function() {
gulp.src('./app/css/*.less')
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('app/assets/css'))
.pipe(browserSync.stream());
});
// Render Jade templates as HTML files
gulp.task('templates', function() {
gulp.src('views/**/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('app/src/'))
});
gulp.task('php', function() {
php.server({ base: 'app', port: 8123, keepalive: true});
});
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', 'php'], function() {
var proxyOptions1 = url.parse('http://some-site:1234');
proxyOptions1.route = '/api/hi';
browserSync({
port: 8999,
proxy: '127.0.0.1:8123',
middleware: [
proxy(proxyOptions1),
history()
],
notify: false
});
gulp.watch("app/assets/css/*.less", ['less']);
gulp.watch("app/**/*.html").on('change', browserSync.reload);
gulp.watch("app/assets/js/*.js").on('change', browserSync.reload);
gulp.watch("views/**/*.jade", ['templates']);
});
What am I doing wrong here?
use only browserSync.stream (replace browserSync.reload then) and pass option once: true like this
browserSync.stream({once: true})
this should works fine.
The awaitWriteFinish option in Chokidar fixed it for me.
Example:
browserSync.init({
server: dist.pages,
files: dist.css + '*.css',
watchOptions: {
awaitWriteFinish : true
}
});
I've been given a project with existing gulp configuration. I'm completely new to gulp so I don't really understand the code at all. To complete the project I need to use express with ejs instead of the default html. However, I couldn't integrate express into the gulp config file, when I tried gulp-express, the server ended up not working as intended or not working at all (when I replace html with ejs).
I need to know which package should I use for this? What kind of folder structure is good enough? And how could I make express with ejs as the template engine work with gulp? Thank you in advance.
(Sorry if I ask too many questions)
The initial folder structure
The gulp config code
// generated on 2016-05-09 using generator-webapp 2.0.0
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
gulp.task('scripts', () => {
return gulp.src('app/scripts/**/*.js')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
.pipe(reload({stream: true}));
});
function lint(files, options) {
return () => {
return gulp.src(files)
.pipe(reload({stream: true, once: true}))
.pipe($.eslint(options))
.pipe($.eslint.format())
.pipe($.if(!browserSync.active, $.eslint.failAfterError()));
};
}
const testLintOptions = {
env: {
mocha: true
}
};
gulp.task('lint', lint('app/scripts/**/*.js'));
gulp.task('lint:test', lint('test/spec/**/*.js', testLintOptions));
gulp.task('html', ['styles', 'scripts'], () => {
return gulp.src('app/*.html')
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.cssnano()))
.pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', () => {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', () => {
return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
.concat('app/fonts/**/*'))
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', () => {
return gulp.src([
'app/*.*',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['styles', 'scripts', 'fonts'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.watch([
'app/*.html',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
gulp.task('serve:dist', () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['dist']
}
});
});
gulp.task('serve:test', ['scripts'], () => {
browserSync({
notify: false,
port: 9000,
ui: false,
server: {
baseDir: 'test',
routes: {
'/scripts': '.tmp/scripts',
'/bower_components': 'bower_components'
}
}
});
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('test/spec/**/*.js').on('change', reload);
gulp.watch('test/spec/**/*.js', ['lint:test']);
});
// inject bower components
gulp.task('wiredep', () => {
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
exclude: ['bootstrap-sass'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], () => {
gulp.start('build');
});
I'm trying to compile all my scripts into a single main.js file which I can then link to my index file. Problem is that all my script files are being concatenated and then just added to the main.js file, so if I save 3 times, I will basically have 3 copies of all my scripts concatenated and put in the main.js file.
I would like to either delete the main.js file each time I save and then run the concatenation, or just clean the file before adding the contents. Now if I try to delete the file using the del module, I receive an error stating that I can't delete files out of the working directory without forcing this action. I would like to avoid forcing this if possible.
I feel that there must be a more elegant way of doing this..
Here's my script task:
// Concat and compile our JS into a minified dist file
gulp.task('scripts', function() {
return gulp.src('../app/public/assets/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
//.pipe(del(['../app/public/assets/scripts/main.js'])) <-- Doesn't work without forcing
.pipe(gulp.dest('../app/public/assets/scripts'))
.pipe(gulpif(flags.build, gulp.dest('../app/dist/assets/scripts')))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulpif(flags.build, gulp.dest('../app/dist/assets/scripts')))
.pipe(notify({ message: 'Finished compiling scripts' }));
});
I usually do something like this (very simplified :) ):
var PARAMS = {
destPath: 'build',
js: [
'src/js/test1.js',
'src/js/test2.js',
// ecc...
],
// other
};
var TARGETS = {
dest: 'main.js', // dest file
extra: [
// This files are inclued only in .bundle.min.js version
// extra file here
],
js: [
'src/js/test1.js',
'src/js/test2.js',
// ecc...
]
};
gulp.task('connect', function() {
return connect.server({
livereload: true,
host: '0.0.0.0',
port: 8000
});
});
gulp.task('reload', ['build'], function () {
return gulp.src(['sandbox/**/*.html'])
.pipe(connect.reload());
});
gulp.task('watch', ['connect', 'build'], function () {
var src = [];
// other
src = src.concat(PARAMS.js);
return gulp.watch(src, ['reload']);
});
gulp.task('clean', function (done) {
return del(['build'], done);
});
gulp.task('build', ['clean'], function () {
return gulp.src(target.js);
.pipe(concat(target.dest))
.pipe(gulp.dest(PARAMS.destPath)) // Plain
.pipe(uglify())
.pipe(rename({ extname: '.min.js' })) // Minified
.pipe(gulp.dest(PARAMS.destPath))
.pipe(addsrc(target.extra))
.pipe(order(target.extra))
.pipe(concat(target.dest))
.pipe(rename({ extname: '.bundled.min.js' })) // Bundled
.pipe(gulp.dest(PARAMS.destPath));
});
gulp.task('default', ['build']);