Skip to content

Instantly share code, notes, and snippets.

@EduardoMRB
Last active September 10, 2015 15:12
Show Gist options
  • Save EduardoMRB/a13314398c2b01d23369 to your computer and use it in GitHub Desktop.
Save EduardoMRB/a13314398c2b01d23369 to your computer and use it in GitHub Desktop.
Gulpfile with browsersync serving assets withou refresh.
var gulp = require("gulp"),
concat = require("gulp-concat"),
minify = require("gulp-minify-css"),
sass = require("gulp-sass"),
sourcemaps = require("gulp-sourcemaps"),
rename = require("gulp-rename"),
php = require("gulp-connect-php"),
gulpif = require("gulp-if"),
env = process.env.NODE_ENV || "dev";
var bs = require("browser-sync").create("servername");
var paths = {
scss: "...",
css: "..."
};
gulp.task("css", function () {
return gulp.src(paths.scss).
pipe(gulpif(env == "dev", sourcemaps.init())).
pipe(sass()).
pipe(minify()).
pipe(rename("app.css")).
pipe(gulpif(env == "dev", sourcemaps.write())).
pipe(gulp.dest(paths.mt.css));
});
gulp.task("phpserver", function () {
php.server({
base: "path/to/index.php",
port: 8010,
keepalive: true
});
});
gulp.task("browser-sync", ["phpserver"], function () {
bs.init({
proxy: "127.0.0.1:8010",
port: 8080,
open: true,
notify: false
});
});
function reloadCss() {
var css = "path/to/app.css";
// Don't refresh browser, just serve the assets.
bs.reload(css);
}
gulp.task("watch", ["browser-sync"], function () {
gulp.watch(paths.scss, ["css", reloadCss]);
})
gulp.task("prod", ["css"]);
gulp.task("default", ["css", "watch"]);
@erickleandrolima
Copy link

Great job!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment