I try to understand how to use gulp with these useful and popular plugins. There are what I have:
runned go(lang) server on localhost:8000
static/local html files under app folder which are used by server to form pages
scss files under the same directory, which are converted into css and then autoprefixed
Here is my gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload');
// "./" - it's "app" directory
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(watch('./*.scss'))
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(gulp.dest('./'));
});
So what I need:
watch html, css/scss files for change and make reload on localhost:8000 (chrome's open tab)
it will be great if there is no need to use:
livereload chrome plugin
expressjs framework
reload html pages if it opened directly just like file without server
I've read that it is possible to achieve this by using gulp-embedlr and gulp-webserver. If so, how to do it?
Ok, the best solution that I find is using Gulp + BrowserSync! It's great solution.
Here is the code of my gulpfile.js:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('browserSync', function() {
browserSync({
//logConnections: false,
//logFileChanges: false,
notify: false,
open: false,
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function() {
return gulp.src('./css/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(reload({stream:true}));
});
gulp.task('watch', function() {
gulp.watch('./css/*.scss', ['sass']);
gulp.watch('./*.html', reload);
});
gulp.task('default', ['watch', 'sass', 'browserSync']);
There is no sense to explain the code above. Just read this: http://www.browsersync.io/docs/gulp/
Related
first time I'm using browser sync with gulp, this is my project structure:
-root
-assets
-img
-src
-css
-js
-scss
index.html
gulpfile.js
package.json
and this is the gulpfile.js:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass'), () => {
browserSync.init({
server: "./src"
});
gulp.watch("./src/scss/*.scss", ['sass']);
gulp.watch("./src/*.html").on('change', browserSync.reload({stream:true}));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve'));
I take the code by the browser sync docs here and modified a bit, but when I type 'gulp' on the console, I get this:
[22:24:59] Starting 'default'...
[22:24:59] Starting 'serve'...
[22:24:59] Starting 'sass'...
[22:24:59] Finished 'sass' after 40 ms
[22:24:59] Finished 'serve' after 43 ms
[22:24:59] Finished 'default' after
Probably I missed something, shouldn't browser sync run indefinitely?
thanks
ok now seems I solved:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', function() {
browserSync.init({
injectChanges: true,
server: "./src"
});
gulp.watch("./src/scss/*.scss", gulp.series('sass'));
gulp.watch("./src/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve','sass'));
I am trying to set the Gulp tasks for styles with postcss, CSS modules etc., but for now only the watch task for the main HTML file is working, and it is not even creating the main CSS file nor the temp folder so I get the error in the console that it can not find the styles.css. It's driving me crazy for days but just cannot get to the bottom of it. Here is my file structure, pretty basic:
application -> views -> index.html
public -> gulp -> tasks -> styles.js, watch.js
-> styles (styles.css inside, base and modules for CSS subfolders)
And here are the styles and watch tasks:
var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
notify: false,
server: {
baseDir: "../application/views"
}
});
watch('../application/views/index.html', function(){
browserSync.reload();
});
watch('../application/public/styles/**/*.css', function(){
gulp.start('cssInject');
});
});
gulp.task('cssInject', ['styles'], function(){
return gulp.src('../application/temp/styles')
.pipe(browserSync.stream());
});
Styles:
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
hexrgba = require('postcss-hexrgba');
gulp.task('styles', function(){
return gulp.src('../application/public/styles/styles.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
.on('error', function(errorInfo){
console.log(errorInfo.toString());
this.emit('end');
})
.pipe(gulp.dest('../application/temp/styles'));
});
If someone can give a piece of advice I would be really grateful.
I have this weird problem after installing the following gulp packages. Everything renders just fine, but when it gets to the part of the liveReload() it just doesn't reload the page...
I installed the livereload chrome extension (is it necessary?), and it seems like there is nothing to config there...
Here is my gulpfile:
var gulp = require('gulp'),
autoPrefixer = require('gulp-autoprefixer'),
jade = require('gulp-jade'),
liveReload = require('gulp-livereload'),
sourceMaps = require('gulp-sourcemaps'),
ts = require('gulp-typescript'),
tsLint = require('gulp-tslint'),
watch = require('gulp-watch'),
sass = require('gulp-sass');
// Configuration
var config = {
js: 'public/_assets/frontend/js',
css: 'public/_assets/frontend/css',
fonts: 'public/_assets/frontend/fonts',
images: 'public/_assets/frontend/img',
markup: 'public/'
};
// Javascript
gulp.task('scripts', function() {
var tsResult = gulp.src(['src/ts/*.ts', 'src/ts/**/*.ts'])
.pipe(tsLint())
.pipe(ts({
noImplicitAny: true
}));
tsResult.js
.pipe(gulp.dest(config.js))
.pipe(liveReload());
});
// Sass
gulp.task('sass', function() {
return gulp.src(['src/sass/*.scss', 'src/sass/**/*.scss'])
.pipe(watch(['src/sass/*.scss', 'src/sass/**/*.scss']))
.pipe(sourceMaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoPrefixer({
browsers: ['last 3 versions'],
cascade: false
}))
.pipe(sourceMaps.write())
.pipe(gulp.dest(config.css))
.pipe(liveReload());
});
// jade
gulp.task('markup', function() {
return gulp.src(['src/**/*.jade', 'src/**/_*.jade'])
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest(config.markup))
.pipe(liveReload());
});
// Images
gulp.task('images', function() {
return gulp.src(['src/images/**/*.*', 'src/images/*.*'])
.pipe(gulp.dest(config.images));
});
// Watch
gulp.task('watch', function() {
liveReload.listen();
gulp.watch(['src/ts/*.ts', 'src/ts/**/*.ts'], ['scripts']);
gulp.watch(['src/sass/*.scss', 'src/sass/**/*.scss'], ['sass']);
gulp.watch(['src/*.jade', 'src/**/*.jade'], ['markup']);
});
// Default Task
gulp.task('default', function() {
gulp.start('sass', 'scripts', 'markup', 'images', 'watch');
});
Everything works just fine, the gulp is doing it's thing and rendering all my files, but the page won't reload... I'm using python simple http server on port 8000.
Any ideas?
The only thing that comes to my mind is: did you include the livereload client script into your page? AFAIK you should be supposed to inject this script at the end of your page's body.
<script src="http://localhost:35729/livereload.js"></script>
You can use
Live Reload Browser Page
GitHub
Live Reload Browser Page is very flexible tool for live reloading of the browser page.
Below is my current Gulpfile.js and when I'm attempting to run gulp minify I'm getting the error, "Task 'minify' is not in your gulpfile". However, I'm able to run gulp sass with no issues. I also have each module installed with npm.
module.exports = function(gulp) {
'use strict'
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('minify', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssnano())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('app/css/min'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'cssnano'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app/'
},
})
})
}
You should not treat the gulpfile.js as a node module and drop the following part
module.exports = function(gulp) {
(don't forget to remove the closing curly (}) at the end of the gulpfile.js)
Then, you should require gulp
var gulp = require('gulp');
That should make it run smoothly.
Why it does run your gulp sass, I don't know. I just created a simple test file in a fresh directory, and it didn't recognise the sass task for me. Maybe you installedgulp, sass or both globally at some point (e.g. earlier project).
So I am trying to set up the livereload server, however, I never get the message Live reload server listening on: <port_number> like in this video. If I change my files, the console says that the file was reloaded. I have the Chrome extension installed. What am I missing? Thanks.
gulpfile.js
'use strict';
// include gulp
var gulp = require('gulp'),
gutil = require('gulp-util');
// include plug-ins
var autoprefix = require('gulp-autoprefixer'),
changed = require('gulp-changed'),
concat = require('gulp-concat'),
http = require('http'),
imagemin = require('gulp-imagemin'),
jshint = require('gulp-jshint'),
livereload = require('gulp-livereload'),
minifyCSS = require('gulp-minify-css'),
minifyHTML = require('gulp-minify-html'),
sass = require('gulp-sass'),
st = require('st'),
stripDebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify');
gulp.task('build-css', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist';
return gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
return gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// JS hint task
gulp.task('jshint', function() {
return gulp.src('./src/scripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
return gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./dist/scripts/'));
});
gulp.task('server', function(done) {
http.createServer(
st({
path: __dirname + '/dist',
index: 'index.html',
cache: false
})
).listen(8080, done);
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
return gulp.src(['./src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./dist/styles/'));
});
gulp.task('watch', ['server'], function() {
livereload.listen({
basePath: 'dist'
});
// watch for HTML changes
gulp.watch('./src/*.html', ['htmlpage']).on('change', livereload.changed);
// watch for JS changes
gulp.watch('./src/scripts/*.js', ['jshint', 'scripts']).on('change', livereload.changed);
// watch for CSS changes
gulp.watch('./src/styles/*.css', ['styles']).on('change', livereload.changed);
gulp.watch('src/scripts/**/*.js', ['jshint']).on('change', livereload.changed);
gulp.watch('src/styles/scss/**/*.scss', ['build-css']).on('change', livereload.changed);
});
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'watch'], function() {
return gutil.log('Gulp is running!')
});
I use browser-sync to reload the browser when a file has changed.
Try something like this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('serve', function() {
gulp.watch("app/**/*.js").on('change', browserSync.reload);
gulp.watch("templates/**/*.html").on('change', browserSync.reload);
gulp.watch("css/**/*.css").on('change', browserSync.reload);
browserSync.init({
server: "./"
});
});
gulp.task('default', ['serve']);
I recommend your attention to the real-time browser page reload tool.
Live Reload Browser Page
Live Reload Browser Page
GitHub
Easy to use. Works independently of the IDE. But you need the IDE to be able to auto-save files. Also works with tools like Gulp, WebPack, Grunt and others.