My goal is to compile and minify a few CSS and JS files, and one HTML file into a new HTML file which should have this kind of structure:
<script>
... compiled JS files ...
</script>
<style>
... minified CSS files ...
</style>
<html file>
This is my file structure:
This is my gulpfile:
const gulp = require('gulp');
const plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var csslint = require('gulp-csslint');
var cssComb = require('gulp-csscomb');
var cleanCss = require('gulp-clean-css');
var jshint = require('gulp-jshint'); // removed
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyHtml = require('gulp-minify-html');
const babel = require('gulp-babel');
const inject = require('gulp-inject-string');
const gulpMerge = require('gulp-merge');
const del = require('del');
const runSequence = require('gulp-sequence');
gulp.task('clean', function () {
return del([
'dist/**/*',
]);
});
gulp.task('css', function () {
gulp.src(['src/**/*.css'])
.pipe(plumber())
.pipe(cssComb())
.pipe(csslint())
.pipe(csslint.formatter())
.pipe(concat('bundle.css'))
.pipe(gulp.dest('dist/'))
.pipe(rename({
suffix: '.min'
}))
.pipe(cleanCss())
.pipe(gulp.dest('dist/'))
});
gulp.task('js', function () {
gulp.src(['src/js/**/*.js'])
.pipe(concat('bundle.js'))
.pipe(babel({
presets: 'env'
}))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(gulp.dest('dist/'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
});
gulp.task('html', function () {
gulp.src(['src/html/**/*.html'])
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifyHtml())
.pipe(gulp.dest('dist/'))
});
gulp.task('concatenateFiles', function() {
return gulpMerge(
gulp.src('dist/bundle.css')
.pipe(inject.wrap("\n<style>\n", "\n</style>\n")),
gulp.src('dist/bundle.js')
.pipe(inject.wrap("\n<script>\n", "\n</script>\n\n")),
gulp.src('src/html/player.html')
)
.pipe(concat('widget.html'))
.pipe(gulp.dest('dist/'));
});
gulp.task('concatenateFilesMinified', function() {
return gulpMerge(
gulp.src('dist/bundle.min.css')
.pipe(inject.wrap('<style>', '</style>')),
gulp.src('dist/bundle.min.js')
.pipe(inject.wrap('<script>', '</script>')),
gulp.src('dist/player.min.html')
)
.pipe(concat('widget.min.html'))
.pipe(gulp.dest('dist/'));
});
const js = 'src/**/*.js';
const css = 'src/**/*.css';
const html = 'src/**/*.html';
const all = [js, css, html];
gulp.task('default', ['clean', 'js', 'css', 'html'], function () {
gulp.watch(js, ['js']);
gulp.watch(css, ['css']);
gulp.watch(html, ['html']);
setTimeout(function() {
runSequence(['concatenateFiles', 'concatenateFilesMinified']);
}, 2000);
});
I know this is a bad approach, especially if you look at the setTimeout(), but I'm just so lost at this point (and this is my first gulpfile).
I've also tried this:
gulp.task('default', ['clean', 'js', 'css', 'html', 'concatenateFiles', 'concatenateFilesMinified'], function () {
gulp.watch(js, ['js']);
gulp.watch(css, ['css']);
gulp.watch(html, ['html']);
});
But the problem is that all dependency tasks are executed in parallel, so the 'concatenateFiles' and 'concatenateFilesMinified' are started before their dependencies (eg JS, CSS and HTML) are ready.
Furthermore, gulp.watch() would only work for js, css and html tasks.
How do I do this properly?
TLDR:
I want to:
build CSS, JS and HTML files from src folder (1 file for each type)
concatenate those three files into one file (wrapping JS into <script>, CSS into <style>) into dist/widget.html
minify the file from step 2. into dist/widget.min.html
I want these 3 things to happen when I run gulp default.
Furthermore, I also want files from step 2. and 3. to be refreshed every time I make changes to files in src/ folder
runSequence should work with tasks, which are returning something. Add 'return' for js, html, concatenateFiles, concatenateFilesMinified
Related
I recently created a workspace with gulp. Everything was working normally (auto-reload, sass compilation, minification, and more)
You can see the code on github
Today I wanted to add jade to the project. The compilation works well but browserSync does not refresh the page automatically
Here is my code
'use strict'
var gulp = require('gulp')
var jade = require('gulp-jade')
var sass = require('gulp-sass')
var cssmin = require('gulp-cssmin')
var rename = require('gulp-rename')
var prefix = require('gulp-autoprefixer')
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')
var imagemin = require('gulp-imagemin')
var browserSync = require('browser-sync').create()
// Compile Jade
gulp.task('jade', function () {
gulp.src('src/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('./dist'))
})
// Configure CSS tasks.
gulp.task('sass', function () {
gulp.src('src/scss/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(prefix('last 2 versions'))
.pipe(cssmin())
.pipe(concat('styles.css'))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream())
})
// Configure JS.
gulp.task('js', function () {
gulp.src('src/js/**/*.js')
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream())
})
// Configure image stuff.
gulp.task('images', function () {
gulp.src('src/img/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'))
.pipe(browserSync.stream())
})
gulp.task('default', ['jade', 'sass', 'js', 'images'], function () {
browserSync.init({
server: './dist'
})
gulp.watch('src/*.jade', ['jade'])
gulp.watch('src/scss/**/*.scss', ['sass'])
gulp.watch('src/js/**/*.js', ['js'])
gulp.watch('./dist/*.html').on('change', browserSync.reload)
})
I tested the code and found the error.
Browsersync gets injected into <head> element, therefore you need to have that element on your page (still its good to have html/head/body).
Implementing my suggestion from comment (about missing browserSync.stream()) and fixing your jade file to:
html
head
body
h1 hello Jade
ul
li comment ça va
li et toi ?
.box salut comment tu vas ?
Solves the problem. BrowserSync now correctly gets inserted into the page :)
I have my gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var sourcemaps = require('gulp-sourcemaps');
var fileinclude = require('gulp-file-include');
var browserify = require('browserify');
var rename = require('gulp-rename');
var streamify = require('gulp-streamify'); // required for uglify
var uglify = require('gulp-uglify'); // minify JS
var source = require('vinyl-source-stream'); // required to dest() for browserify
var browserSync = require('browser-sync').create();
var localSettings = require('./gulp/localConfig.js');
gulp.task('sass', function () {
return gulp.src('./assets/sass/main.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError)) // .on('error', sass.logError) prevents gulp from crashing when saving a typo or syntax error
.pipe(sourcemaps.write())
.pipe(gulp.dest('./assets/sass'))
.pipe(browserSync.stream()); // causes injection of styles on save
});
gulp.task('compileHTML', function() {
return gulp.src(['static/src/*.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#root'
}))
.pipe(gulp.dest('./static/compiled'))
.pipe(browserSync.stream()); // causes injection of html changes on save
});
// Static Server for browsersync
gulp.task('sync', ['sass'], function() {
browserSync.init({
startPath: "static/compiled/index.html",
open: localSettings.openBrowserSyncServerOnBuild,
server: {
baseDir: "./",
}
});
});
gulp.task('watch', function() {
gulp.watch('./assets/sass/**/*.scss', ['sass']);
gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML']);
gulp.watch('./assets/js/**/*.js', ['javascript']);
});
gulp.task('javascript', function() {
var bundleStream = browserify('./assets/js/main.js').bundle();
bundleStream
.pipe(source('main.js'))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./assets/js/'))
.pipe(browserSync.stream());
})
// Default Task
gulp.task('default', ['compileHTML', 'javascript', 'sass', 'watch', 'sync']);
Mostly everything with my build works great, however I am having one issue with my compileHTML task. When any modifications are made to my html, it is compiled and injected into the page with BrowserSync. The problem is that BrowserSync is injecting the markup into the page AFTER it reloads, so that I have to manually refresh or save the file again.
Although I am doing the exact same thing with my SASS task, I have no problems with that task. Why do my styles inject into the page before the reload, but the HTML does not?
Just for testing, I tried adding a setTimout surrounding the BrowserSync injection, but it did not affect the timing of the injection other than adding a delay.
I would try to follow the example at gulp-reload docs. Their example is:
// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
browserSync.reload();
done();
});
So you try :
gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML'],
function (done) {
browserSync.reload();
done();
});
And remove the pipe browserSync.stream() in your 'complieHTML' task.
[I might first try as a very simple attempt changing from stream() to reload() in that task before the changes above.]
My command line shows following error while i entered the gulp watch command. Since gulp is searching css files from inside the app directory instead of searching it from bower_components.I have tried using minify-css as well as copy-css.Both are not working.
events.js:160
throw er; // Unhandled 'error' event
^
Error: Path F:\Backup Folder\coursera-project\Full stack course\Angular Js\Assignments\week1\confusion\app\bower_components\bootstrap\dist\css\bootstrap.min.css not found!
My gulpfile.js file
'use strict';
var gulp = require('gulp'),
cleancss = require('gulp-clean-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del'),
ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[cleancss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'))
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
I am also not able to copy html files to my dist folder.
Can't figure out why gulp-concat doesn't work correctly. When i try to compile my javascript it doesn't give me the output file. All the paths are correct. I tried to remove .pipe(concat()) and the .js file appeared in the correct folder. But the same code with concat() doesn't work.
var gulp = require('gulp'),
sass = require('gulp-sass'),
jade = require('gulp-jade-php'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-autoprefixer');
var path = {
src: {
styles: 'git/**/*.scss',
scripts: 'git/**/scripts/*.js',
jade: 'git/**/*.jade'
},
publicPath: "../",
npm: {
jquery: 'bower_components/jquery/dist/jquery.min.js',
bootstrap: 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
swiper: 'bower_components/swiper/dist/js/swiper.jquery.min.js'
},
watch: {
styles: 'git/**/*.scss',
scripts: 'git/**/*.js',
jade: 'git/**/*.jade'
}
};
var scriptPaths = [path.src.scripts, path.npm.jquery, path.npm.bootstrap, path.npm.swiper];
// Scripts //
gulp.task('scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
gulp.task('build:scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
// Watch //
gulp.task('watch', function () {
gulp.watch(path.watch.styles, ['styles']);
gulp.watch(path.watch.scripts, ['scripts']);
gulp.watch(path.watch.jade, ['html']);
});
gulp.task('default', ['styles', 'scripts', 'html']);
gulp.task('build', ['build:styles', 'build:scripts', 'html']);
Do you have any ideas why it doesn't work. I tried to remove node_modules and installed it again, but it didn't help
I have a gulp file, and when I run it only the JavaScript files get complied and the less files doesn't get compiled, and I cannot seem to understand why is this happening.
This is my gulp file:
'use strict';
var path = require('path');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var watch = require('gulp-watch');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var livereload = require('gulp-livereload');
var jsFiles = ['*.js', 'src/**/*.js'];
// js hints
gulp.task('hints', function(){
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {
verbose: true
}))
.pipe(jscs()); });
// less
gulp.task('less', function () {
return gulp.src('./public/src/less/main.less')
.pipe(less({ paths: [path.join(__dirname, 'less', 'includes')] }))
.pipe(gulp.dest('./public/src/less/css')); });
// concat
gulp.task('concat', ['concat:css', 'concat:js']); gulp.task('concat:css', function() {
return gulp.src([
'public/lib/bower_components/bootstrap/dist/css/bootstrap.min.css',
'public/lib/bower_components/swiper/dist/css/swiper.min.css',
'public/lib/bower_components/font-awesome/css/font-awesome.min.css',
'public/src/less/css/main.css'
])
.pipe(concat('styles.css'))
.pipe(gulp.dest('./public/build/')); }); gulp.task('concat:js', function() {
return gulp.src([
'public/lib/bower_components/jquery/dist/jquery.min.js',
'public/lib/bower_components/bootstrap/dist/js/bootstrap.min.js',
'public/lib/bower_components/swiper/dist/js/swiper.min.js',
'public/lib/bower_components/jquery.scrollTo/jquery.scrollTo.min.js',
'public/lib/bower_components/jquery.localScroll/jquery.localScroll.min.js',
'public/lib/bower_components/jquery-waypoints/lib/jquery.waypoints.min.js',
'public/lib/bower_components/gsap/src/uncompressed/TweenMax.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js',
'public/src/js/init.js',
'public/src/js/utils.js',
'public/src/js/main.js'
])
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/build/')); });
// watch
gulp.task('watch', ['watch:css', 'watch:js']);
gulp.task('watch:css', function () {
gulp.watch('public/src/less/*.less', ['less', 'concat:css']);
});
gulp.task('watch:js', function () {
gulp.watch('public/src/js/*.js', ['concat:js', 'hints']);
});
gulp.task('build', [ 'less', 'concat']);
gulp.task('development', [ 'less', 'concat', 'watch']);
When I run gulp development the css and js file gets created under the build folder but because the less files dont get compiled to css the css file under build folder has none of my styles.
Does someone know how to solve this issue?
Thank you