I'm using gulp to watch file changes and compile my scss, But watch isn't tracking the file changes.
im using gulp-sass and the version is 4.0
const { src, dest, watch, series } = require('gulp');
const { sass } = require('gulp-sass');
function compileSass() {
return src('app/assets/scss/main.scss')
.pipe(sass())
.pipe(dest('app/css'));
}
function start() {
//compile and watch
watch('app/assets/scss/**/*.scss', { events: 'change' }, function(compileSass) {
// body omitted
compileSass();
});
}
exports.default = series(start);
Try:
function start() {
//compile and watch
watch('app/assets/scss/**/*.scss', { events: 'change' }, function(cb) {
// body omitted
compileSass();
cb();
})
}
cb is a callback function - just leave it as cb (it doesn't need to exist anywhere else) and is called last in the task.
Not sure why your task is not wrapped in gulp.task.
Try to paste this code in your gulpfile.js
gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass'); // not { sass }
/** Transpile sass/scss to css */
gulp.task('compile-sass', () => {
return gulp.src('app/assets/scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'));
});
/** Run the compile-sass task then set a watchers to app/assets/scss/**/*.scss */
gulp.task('watch', gulp.series(
'compile-sass',
(done) => {
gulp.watch('app/assets/scss/**/*.scss')
.on('change', gulp.series('compile-sass'))
done()
},
));
/** Default task */
gulp.task('default', gulp.series('watch'));
Now you can run it using gulp in your terminal.
Related
I have simply 'watchFiles' task which after file changed use task 'reload'. This 'reload' task is in separate file. How can I load this task to my 'watchFiles' task when I don't want this task in the same file?
// watchFiles task
gulp.task(watchFiles);
function watchFiles(cb) {
watch(src + '**/*.html', series('reload'));
cb();
}
// reload task in another file
gulp.task(reload);
function reload(cb) {
browserSync.reload();
cb();
}
// run from gulpfile
exports.watch = series('watchFiles');
I would do like this:
// watchFiles task file = watchfiles_task_file.js
const { reload } = require('./reload_task_file');
const { series, watch } = require('gulp');
const src = './';
function watchFiles(cb) {
watch(src + '**/*.html', series(reload));
cb();
}
exports.watchFiles = watchFiles;
// end watchfiles_task_file.js
// reload task in another file = reload_task_file.js
const browserSync = require('browser-sync').create();
function reload(cb) {
browserSync.reload();
cb();
}
exports.reload = reload;
// end reload_task_file.js
// gulpfile.js
const { watchFiles } = require('./watchfiles_task_file');
const { series } = require('gulp');
exports.watch = series(watchFiles);
I'm trying to import custom fonts using Gulp and Sass, but i can't figure out how.
For now, i've tried many things :
Create a mixin
#mixin font-face($font-family, $file-path, $font-weight, $font-style) {
#font-face {
font-family: $font-family;
src: url("#{$file-path}.eot");
src: url("#{$file-path}.eot?#iefix") format("embedded-opentype"),
url("#{$file-path}.woff") format("woff"),
url("#{$file-path}.ttf") format("truetype"),
url("#{$file-path}.svg##{$font-family}") format("svg");
font-weight: $font-weight;
font-style: $font-style;
}
// Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: $font-family;
src: url("#{$file-path}.svg##{$font-family}") format("svg");
}
}
}
Then in my main scss file, i've included it like so
/* Include custom fonts */
#include font-face(
"Myfont-Regular",
"../../src/fonts/Myfont-Regu",
400,
normal
);
#include font-face(
"Myfont-Bold",
"../../src/fonts/Myfont-Bold",
700,
bold
);
#include font-face(
"Myfont-Black",
"../../src/fonts/Myfont-BlacExte",
900,
normal
);
/* End custom fonts include */
///Defining Font Family
$body-font-regular: "Myfont-Regular", Arial, Helvetica, sans-serif;
$body-font-bold: "Myfont-Bold", Arial, Helvetica, sans-serif;
$body-font-black: "Myfont-Black", Arial, Helvetica, sans-serif;
I think the main problem comes from my .gulpfile, but i can't find out where (i'm just starting using gulp, so i made it out of snippets i found). I've created a gulp task to copy the font folder but i'm not sure how to make it work. Here is my gulpfile :
"use strict";
/*global require*/
const autoprefixer = require("autoprefixer");
const babel = require("gulp-babel");
const browserSync = require("browser-sync");
const changed = require("gulp-changed");
const concat = require("gulp-concat");
const data = require("gulp-data");
const del = require("del");
const gulp = require("gulp");
const gulpif = require("gulp-if");
const imagemin = require("gulp-imagemin");
const path = require("path");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss");
const pug = require("gulp-pug");
const runSequence = require("run-sequence");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const uglify = require("gulp-uglify");
/**
* List of options
*/
const options = {
uglifyJS: true,
sourceMaps: true,
useBabel: true
};
/*
* List of directories
*/
const paths = {
input: {
sass: "./src/sass/",
data: "./src/_data/",
js: "./src/js/",
images: "./src/img/",
fonts: "./src/fonts"
},
output: {
css: "./public/css/",
js: "./public/js/",
images: "./public/img/",
fonts: "./public/fonts"
},
public: "./public/"
};
/************************
* Gulp Tasks *
************************/
/**
* Concat all scripts and make sourcemap (optional)
* Scripts from vendor folder added first
*/
gulp.task("javascript", function() {
return gulp
.src([paths.input.js + "vendor/**/*.js", paths.input.js + "**/*.js"])
.pipe(plumber())
.pipe(gulpif(options.sourceMaps, sourcemaps.init()))
.pipe(
gulpif(
options.useBabel,
babel({
presets: ["#babel/preset-env"]
})
)
)
.pipe(concat("script.js"))
.pipe(gulpif(options.uglifyJS, uglify()))
.pipe(gulpif(options.sourceMaps, sourcemaps.write("../maps")))
.pipe(gulp.dest(paths.output.js))
.pipe(
browserSync.reload({
stream: true
})
);
});
/*
* Minify all images
*/
gulp.task("image-min", function() {
return gulp
.src(paths.input.images + "**/*.+(png|jpg|gif|svg|jpeg)")
.pipe(plumber())
.pipe(changed(paths.output.images))
.pipe(imagemin())
.pipe(gulp.dest(paths.output.images));
});
/**
* Compile .pug files and pass in data from json file
* Example: index.pug - index.pug.json
*/
gulp.task("pug", function() {
return gulp
.src("./src/*.pug")
.pipe(plumber())
.pipe(
data(function(file) {
const json = paths.input.data + path.basename(file.path) + ".json";
delete require.cache[require.resolve(json)];
return require(json);
})
)
.pipe(pug({ pretty: true }))
.pipe(gulp.dest(paths.public))
.pipe(
browserSync.reload({
stream: true
})
);
});
/**
* Removing public folder with it contents
*/
gulp.task("build-clean", function() {
return del(paths.public);
});
/**
* Recompile .pug files and live reload the browser
*/
gulp.task("rebuild", ["pug"], function() {
browserSync.reload();
});
/**
* Launch the browser-sync Server
*/
gulp.task("browser-sync", function() {
browserSync({
server: {
baseDir: paths.public
},
notify: false
});
});
/**
* Copy custom font folder
*/
gulp.task("copy", ["clean"], function() {
return gulp
.src(["src/fonts/*"], {
base: "src"
})
.pipe(gulp.dest("public"));
});
/**
* Task group for development
*/
gulp.task("develop", function() {
runSequence(
"build-clean",
["sass", "javascript", "image-min", "pug"],
"browser-sync"
);
});
/**
* Building distributive
*/
gulp.task("build-dist", function() {
runSequence("build-clean", ["sass", "javascript", "image-min", "pug"]);
});
/**
* Compile .scss files
* Autoprefixer
* Sourcemaps (optional)
*/
gulp.task("sass", function() {
return gulp
.src(paths.input.sass + "*.scss")
.pipe(plumber())
.pipe(gulpif(options.sourceMaps, sourcemaps.init()))
.pipe(
sass({
includePaths: [paths.input.sass],
outputStyle: "compressed"
})
)
.pipe(postcss([autoprefixer()]))
.pipe(gulpif(options.sourceMaps, sourcemaps.write("../maps")))
.pipe(gulp.dest(paths.output.css))
.pipe(
browserSync.reload({
stream: true
})
);
});
/**
* Watch files for changes
*/
gulp.task("watch", function() {
gulp.watch(paths.input.sass + "**/*.scss", ["sass"]);
gulp.watch(paths.input.js + "**/*.js", ["javascript"]);
gulp.watch(paths.input.images + "**/*", ["image-min"]);
gulp.watch(["./src/**/*.pug", "./src/**/*.json"], ["pug"]);
});
/**
* Shorthand for build-dist
*/
gulp.task("build", ["build-dist"]);
/**
* Default task for development, fast-start by 'gulp' command
*/
gulp.task("default", ["develop", "watch"]);
By the way, here is my project folder structure :
I am having troubling running sass and minification together. Some times the minification task starts before the sass task has finished.
When I run the separately they work fine.
Here is my gulp file...
/// <binding />
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json"),
runSequence = require('run-sequence');
var sass = require('gulp-sass');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var webroot = "./wwwroot/";
var paths = {
scss: webroot + "sass/**/*.scss",
scssDest: webroot + "css/"
};
// 1. react
gulp.task('react', function () {
return browserify({ entries: './wwwroot/clientapp/root', extensions: ['.jsx', '.js'], debug: true })
.transform('babelify', { presets: ['es2015', 'react'] })
.bundle()
.pipe(source('index.js'))
.pipe(gulp.dest('./wwwroot/'));
});
// 2. sass
gulp.task('compile:sass', function () {
gulp.src(paths.scss)
.pipe(sass())
.pipe(gulp.dest(paths.scssDest));
});
gulp.task("sass", ["compile:sass"]);
function getBundles(regexPattern) {
return bundleconfig.filter(function (bundle) {
return regexPattern.test(bundle.outputFileName);
});
}
gulp.task("css", function () {
var tasks = getBundles(/\.css$/).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
gulp.task("clean", function () {
return del(['wwwroot/css/*', 'wwwroot/index.js']);
});
gulp.task("default", ["clean", "sass", "react", "css"]);
It looks like you are assuming that these tasks are run in series:
gulp.task("default", ["clean", "sass", "react", "css"]);
They do not, from gulp.task documentation:
Note: The tasks will run in parallel (all at once), so don't assume that the tasks will start/finish in order.
There are a number of ways to fix that and there should be a few questions here on the subject.
You can use run-sequence, use gulp4.0 which has series and parallel functions (but is still technically in beta) or make some task like your 'react' task dependent on the 'sass' and 'css" tasks having finished.
So try :
gulp.task('react', ['css'], function () { ...
gulp.task("css", ['sass'], function () { ...
gulp.task('compile:sass', ['clean'], function () { ...
and now simply
gulp.task("default", ["react"]);
will fire them off in the correct order.
Although I suppose 'clean' doesn't necessarily have to run first. run-sequence does help to make the order of things much more obvious. If you can I would suggest looking into gulp4.
I have the following in my gulpfile.js:
var sass_paths = [
'./httpdocs-site1/media/sass/**/*.scss',
'./httpdocs-site2/media/sass/**/*.scss',
'./httpdocs-site3/media/sass/**/*.scss'
];
gulp.task('sass', function() {
return gulp.src(sass_paths)
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer('last 4 version'))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest(???));
});
I'm wanting to output my minified css files to the following paths:
./httpdocs-site1/media/css
./httpdocs-site2/media/css
./httpdocs-site3/media/css
Am I misunderstanding how to use sources/destinations? Or am I trying to accomplish too much in a single task?
Edit: Updated output paths to corresponding site directories.
I guess that the running tasks per folder recipe may help.
Update
Following the ideas in the recipe, and oversimplifying your sample just to give the idea, this can be a solution:
var gulp = require('gulp'),
path = require('path'),
merge = require('merge-stream');
var folders = ['httpdocs-site1', 'httpdocs-site2', 'httpdocs-site3'];
gulp.task('default', function(){
var tasks = folders.map(function(element){
return gulp.src(element + '/media/sass/**/*.scss', {base: element + '/media/sass'})
// ... other steps ...
.pipe(gulp.dest(element + '/media/css'));
});
return merge(tasks);
});
you are going to want to use merge streams if you would like to use multiple srcs but you can have multiple destinations inside of the same one. Here is an example.
var merge = require('merge-stream');
gulp.task('sass', function() {
var firstPath = gulp.src(sass_paths[0])
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer('last 4 version'))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('./httpdocs-site1/media/css'))
.pipe(gulp.dest('./httpdocs-site2/media/css'));
var secondPath = gulp.src(sass_paths[1])
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer('last 4 version'))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('./httpdocs-site1/media/css'))
.pipe(gulp.dest('./httpdocs-site2/media/css'));
return merge(firstPath, secondPath);
});
I assumed you wanted different paths piped here so there is site1 and site2, but you can do this to as many places as needed. Also you can specify a dest prior to any of the steps if, for example, you wanted to have one dest that had the .min file and one that didn't.
You can use gulp-rename to modify where files will be written.
gulp.task('sass', function() {
return gulp.src(sass_paths, { base: '.' })
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer('last 4 version'))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(rename(function(path) {
path.dirname = path.dirname.replace('/sass', '/css');
path.extname = '.min.css';
}))
.pipe(gulp.dest('.'));
});
Important bit: use base option in gulp.src.
For the ones that ask themselves how can they deal with common/specifics css files (works the same for scripts), here is a possible output to tackle this problem :
var gulp = require('gulp');
var concat = require('gulp-concat');
var css = require('gulp-clean-css');
var sheets = [
{ src : 'public/css/home/*', name : 'home.min', dest : 'public/css/compressed' },
{ src : 'public/css/about/*', name : 'about.min', dest : 'public/css/compressed' }
];
var common = {
'materialize' : 'public/assets/materialize/css/materialize.css'
};
gulp.task('css', function() {
sheets.map(function(file) {
return gulp.src([
common.materialize,
file.src + '.css',
file.src + '.scss',
file.src + '.less'
])
.pipe( concat(file.name + '.css') )
.pipe( css() )
.pipe( gulp.dest(file.dest) )
});
});
All you have to do now is to add your sheets as the object notation is constructed.
If you have additionnal commons scripts, you can map them by name on the object common, then add them after materialize for this example, but before the file.src + '.css' as you may want to override the common files with your customs files.
Note that in the src attribute you can also put path like this :
'public/css/**/*.css'
to scope an entire descendence.
I had success without needing anything extra, a solution very similar to Anwar Nairi's
const p = {
dashboard: {
css: {
orig: ['public/dashboard/scss/style.scss', 'public/dashboard/styles/*.css'],
dest: 'public/dashboard/css/',
},
},
public: {
css: {
orig: ['public/styles/custom.scss', 'public/styles/*.css'],
dest: 'public/css/',
},
js: {
orig: ['public/javascript/*.js'],
dest: 'public/js/',
},
},
};
gulp.task('default', function(done) {
Object.keys(p).forEach(val => {
// 'val' will go two rounds, as 'dashboard' and as 'public'
return gulp
.src(p[val].css.orig)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoPrefixer())
.pipe(cssComb())
.pipe(cmq({ log: true }))
.pipe(concat('main.css'))
.pipe(cleanCss())
.pipe(sourcemaps.write())
.pipe(gulp.dest(p[val].css.dest))
.pipe(reload({ stream: true }));
});
done(); // <-- to avoid async problems using gulp 4
});
Multiple sources with multiple destinations on gulp without using any extra plugins just doing concatenation on each js and css. Below code works for me. Please try it out.
const gulp = require('gulp');
const concat = require('gulp-concat');
function task(done) {
var theme = {
minifiedCss: {
common: {
src : ['./app/css/**/*.min.css', '!./app/css/semantic.min.css'],
name : 'minified-bundle.css',
dest : './web/bundles/css/'
}
},
themeCss:{
common: {
src : ['./app/css/style.css', './app/css/responsive.css'],
name : 'theme-bundle.css',
dest : './web/bundles/css/'
}
},
themeJs: {
common: {
src: ['./app/js/jquery-2.1.1.js', './app/js/bootstrap.js'],
name: 'theme-bundle.js',
dest: './web/_themes/js/'
}
}
}
Object.keys(theme).map(function(key, index) {
return gulp.src(theme[key].common.src)
.pipe( concat(theme[key].common.name) )
.pipe(gulp.dest(theme[key].common.dest));
});
done();
}
exports.task = task;
Using gulp-if helps me a lot.
The gulp-if first argument. is the gulp-match second argument condition
gulp-if can be found in gulp-if
import {task, src, dest} from 'gulp';
import VinylFile = require("vinyl");
const gulpif = require('gulp-if');
src(['foo/*/**/*.md', 'bar/*.md'])
.pipe(gulpif((file: VinylFile) => /foo\/$/.test(file.base), dest('dist/docs/overview')))
.pipe(gulpif((file: VinylFile) => /bar\/$/.test(file.base), dest('dist/docs/guides')))
});
I think we should create 1 temporary folder for containing all these files. Then gulp.src point to this folder
The destination will have the same directory structure as the source.
I've recently switched from using Web Essentials to grunt-ts to compile my typescript files due to the flexibility of output. Part of the reason I switched is that I don't want all files compiled seperately, and I don't want to have all files compiled to a single file. I want a bit of both. Since I've recently started using grunt for a lot of tasks, I thought I might as well switch my TS build too.
Here's my gruntfile
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
dirs: {
distribution: 'script/dist',
ts_root: 'script/src',
ts_controllers: 'script/src/controllers'
},
ts: {
apprunner: {
src: ['<%= dirs.ts_root %>/main.ts'],
out: '<%= dirs.distribution %>/src/main.js',
options: {
target: 'es5'
}
},
controllers: {
src: ['<%= dirs.ts_controllers %>/*.ts'],
out: '<%= dirs.distribution %>/src/controllers.js'
options: {
target: 'es5'
}
}
}
});
grunt.loadNpmTasks('grunt-ts');
grunt.registerTask('default', ['ts']);
};
Inside the main.ts file, I have to reference one of the typescript files that, when compiled, makes up part of the controllers.js file.
So my main.js file I have the following:
/// <reference path="controllers/ExampleController.ts" />
var newExample = new wctApp.controllers.ExampleController();
Grunt compiles my controllers.js file fine:
var wctApp;
(function (wctApp) {
(function (controllers) {
var ExampleController = (function () {
function ExampleController() {
}
return ExampleController;
})();
controllers.ExampleController = ExampleController;
})(wctApp.controllers || (wctApp.controllers = {}));
var controllers = wctApp.controllers;
})(wctApp || (wctApp = {}));
But it compiles the same code inside the main.js file.
var wctApp;
(function (wctApp) {
(function (controllers) {
var ExampleController = (function () {
function ExampleController() {
}
return ExampleController;
})();
controllers.ExampleController = ExampleController;
})(wctApp.controllers || (wctApp.controllers = {}));
var controllers = wctApp.controllers;
})(wctApp || (wctApp = {}));
;
var newExample = new wctApp.controllers.ExampleController();
If I remove the reference from the main file, it won't build because it can't find ExampleController. How can I keep the reference to this file, but stop it from being compiled in the main.js file.
Don't use out. Because out merges all the TypeScript files into one. Instead use outDir (if you need to redirect to a different folder). Or better don't use anything (no out no outDir) and it will put the generated JS next to the file.