Skip to content

Instantly share code, notes, and snippets.

@daothanh
Last active July 12, 2019 09:31
Show Gist options
  • Save daothanh/b3e4fde4f38853a480e29d2e4ac7b216 to your computer and use it in GitHub Desktop.
Save daothanh/b3e4fde4f38853a480e29d2e4ac7b216 to your computer and use it in GitHub Desktop.
ExpressJs + Gulp + Browser Sync + SASS + JS
'use strict';
// simple express server
const express = require('express');
const app = express();
const router = express.Router();
const path = require('path');
app.use(express.static('public'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname+'/pages/index.html'))
});
app.listen(5000);
const gulp = require('gulp');
const browserSync = require('browser-sync');
const nodemon = require('gulp-nodemon');
const sass = require('gulp-sass');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
// sass.compiler = require('sass')
gulp.task('sass', () => {
return gulp
.src('scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(cleanCSS())
.pipe(sass({ errLogToConsole: true }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public/css'));
});
gulp.task('copy', () => {
gulp.src('./node_modules/simple-line-icons/fonts/*').pipe(gulp.dest('./public/fonts'));
gulp.src('./node_modules/font-awesome/fonts/*').pipe(gulp.dest('./public/fonts'));
});
gulp.task('sass:watch', () => {
return gulp.watch('./scss/**/*.scss', ['sass']);
});
gulp.task('js', () => {
return gulp
.src('js/main.js')
.pipe(uglify())
.pipe(gulp.dest('./public/js'));
});
gulp.task('nodemon', cb => {
let started = false;
return nodemon({
script: 'app.js',
}).on('start', () => {
if (!started) {
cb();
started = true;
}
});
});
gulp.task(
'browser-sync',
gulp.series('nodemon', () => {
browserSync.init(null, {
proxy: 'http://localhost:5000',
files: ['public/**/*.*', 'pages/**/*.*'],
port: 9001,
});
})
);
gulp.task('serve', gulp.series('browser-sync', () => {}));
gulp.task('watch', gulp.parallel('serve', 'sass', 'js', 'copy'));
gulp.watch(['scss/**/*.scss'], gulp.series('sass'));
gulp.watch(['js/**/*.js'], gulp.series('js'));
{
"name": "watch",
"version": "1.0.0",
"description": "Watch theme",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": {
"name": "Webvi Viet Nam",
"email": "lienhe@webvi.vn",
"url": "http://webvi.vn"
},
"license": "PRIVATE",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"autoprefixer": "^9.6.1",
"browser-sync": "^2.26.7",
"cssnano": "^4.1.10",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"gulp-nodemon": "^2.4.2",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment