I am trying to move all the font-awesome fonts from the bower_components folder to my build directory, but the task isn't copying any files.
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify');
var config = {
bowerDir: 'bower_components'
}
gulp.task('fa', function() {
return
gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('assets/fonts/font-awesome/'));
});
When I run gulp fa it runs fine, but no files appear in my assets/fonts/font-awesome directory.
I know the .pipe(gulp.dest()) function works because I have a scripts function like so:
gulp.task('scripts', function(){
return gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'bower_components/foundation/js/foundation.min.js',
'assets/js/custom/app.js',
])
.pipe(concat('app.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(notify({
message: 'Scripts minified'
}));
});
Any ideas?
EDIT
My folder structure is like this:
assets/
--fonts/
----font-awesome/
gulpfile.js
bower_components/
--font-awesome/
----fonts/
------fontawesome-webfont.eot
------fontawesome-webfont.svg
------fontawesome-webfont.ttf
------fontawesome-webfont.woff
------fontawesome-webfont.woff2
I want to suggest to use gulp-copy
var copy = require('gulp-copy');
gulp.task('copy', function() {
gulp.src(['bower_components/font-awesome/fonts/*.*'])
.pipe(copy('assets/fonts/font-awesome/', { prefix: 3}));
});
Related
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
/project
--> Module1
--> scss
--> Test1.scss
--> Module2
--> scss
--> Test2.scss
Click here for folder structure
I have a project with multiple modules. I'm trying to write a gulp task that compiles the sass files and creates css files within each module. I have the following folder structure and gulpfile.
The task is currently designed to compile the scss files and create the css and css.map files in the same location as the scss files.
How can I move them both outside the scss folder, but still inside their respective modules?
You can add a config file to specify the build location for the files so that they can be generated in a folder of your choice, like so:
let gulp = require('gulp');
let sass = require('gulp-sass');
let sourcemaps = require('gulp-sourcemaps');
let rename = require('gulp-rename');
let gulpUtil = require('gulp-util');
let merge = require('merge-stream');
const CONFIGS = [require('./gulp.module1.config'), require('./gulp.module2.config')];
gulp.task('sass', function () {
let tasks = CONFIGS.map(config => {
return gulp.src(config.sass.src)
.pipe(sass())
.on('error', error => console.log(error))
.pipe(rename('app.min.css'))
.pipe(gulp.dest(config.buildLocations.css));
});
return merge(tasks);
});
Config 1:
module.exports = {
app: { baseName: 'module1' },
sass: {
src: ['./project/module1/scss/*.scss']
},
buildLocations: {
css: './project/module1/'
}
}
config 2
module.exports = {
app: { baseName: 'module1' },
sass: {
src: ['./project/module2/scss/*.scss']
},
buildLocations: {
css: './project/module2/'
}
}
Folder Structure
UPDATE: If you don't want to write an individual config file you can use the path library to rename it, leaves you with the files on the parent level.
gulp.task('sass', function () {
return gulp.src('./project/**/scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(rename(function(file) {
file.dirname = path.dirname(file.dirname)
return file;
}))
.pipe(gulp.dest('./project'))
});
gulp-flatten is really handy for selecting which directories to include or exclude from the final structure.
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var flatten = require("gulp-flatten");
gulp.task('sass', function () {
return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
// keep one parent directory: "Module1", "Module2"
// relative to your glob bae, so first after "project"
.pipe(flatten({ includeParents: 1}))
.pipe(gulp.dest('project'));
});
Have been unable to get Browsersync working in Gulp.
I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all.
I am using MAMP and the site works fine.
Tried a few things but limited gulpfile knowledge.
thanks in advance.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
babel = require('gulp-babel'),
browserSync = require('browser-sync').create();
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified
styles
.pipe(gulp.dest('./assets/css/'))
});
// JSHint, concat, and minify JavaScript
gulp.task('site-js', function() {
return gulp.src([
// Grab your custom scripts
'./assets/js/scripts/*.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest('./assets/js'))
});
// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
return gulp.src([
// Foundation core - needed if you want to use any of the
components below
'./vendor/foundation-sites/js/foundation.core.js',
'./vendor/foundation-sites/js/foundation.util.*.js',
// Pick the components you need in your project
'./vendor/foundation-sites/js/foundation.abide.js',
'./vendor/foundation-sites/js/foundation.accordion.js',
'./vendor/foundation-sites/js/foundation.accordionMenu.js',
'./vendor/foundation-sites/js/foundation.drilldown.js',
'./vendor/foundation-sites/js/foundation.dropdown.js',
'./vendor/foundation-sites/js/foundation.dropdownMenu.js',
'./vendor/foundation-sites/js/foundation.equalizer.js',
'./vendor/foundation-sites/js/foundation.interchange.js',
'./vendor/foundation-sites/js/foundation.magellan.js',
'./vendor/foundation-sites/js/foundation.offcanvas.js',
'./vendor/foundation-sites/js/foundation.orbit.js',
'./vendor/foundation-sites/js/foundation.responsiveMenu.js',
'./vendor/foundation-sites/js/foundation.responsiveToggle.js',
'./vendor/foundation-sites/js/foundation.reveal.js',
'./vendor/foundation-sites/js/foundation.slider.js',
'./vendor/foundation-sites/js/foundation.sticky.js',
'./vendor/foundation-sites/js/foundation.tabs.js',
'./vendor/foundation-sites/js/foundation.toggler.js',
'./vendor/foundation-sites/js/foundation.tooltip.js',
])
.pipe(babel({
presets: ['es2015'],
compact: true
}))
.pipe(sourcemaps.init())
.pipe(concat('foundation.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified
Foundation JS
.pipe(gulp.dest('./assets/js'))
});
// Update Foundation with Bower and save to /vendor
gulp.task('bower', function() {
return bower({ cmd: 'update'})
.pipe(gulp.dest('vendor/'))
});
// Browser-Sync watch files and inject changes
gulp.task('browsersync', function() {
// Watch files
var files = [
'./assets/css/*.css',
'./assets/js/*.js',
'**/*.php',
'assets/images/**/*.{png,jpg,gif,svg,webp}',
];
browserSync.init(files, {
// Replace with URL of your local site
proxy: "s18.dev",
});
gulp.watch('./assets/scss/**/*.scss', ['styles']);
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change',
browserSync.reload);
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('./assets/scss/**/*.scss', ['styles']);
// Watch site-js files
gulp.watch('./assets/js/scripts/*.js', ['site-js']);
// Watch foundation-js files
gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']);
});
// Run styles, site-js and foundation-js
gulp.task('default', function() {
gulp.start('styles', 'site-js', 'foundation-js');
});
It was in fact my lack of gulp knowledge....
On closer inspection of the gulpfile, there were 2 functions - one with BS and one without...
I was running 'gulp watch' with no joy, whereas simply running 'gulp browsersync' did the trick.
bonza.
when running gulp watch it appears that its watching as the file changes. However it appears that its writting the .css file to the same folder where I am making the changes. Here is my Gulp File. I want it to put the .min.css and the .css file inside root/www/css The folder where my scss is located in /root/scss I want to be able to edit it here but have it compile and put the .css and min.css inside /root/www/css It looks looks like thats what it should be doing with these items:
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
But its just creating a .css file only and its in the same folder the .scss is at.
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var paths = {
sass: ['./scss/**/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
Sometimes when I add the ./ to the destinations Gulp tries to make a new directory. Taking that off usually fixes it.
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('www/css/'))
.on('end', done);
});
Trying to use main-bower-files and filters to copy files from bower_components. So far its working except for less. All it is taking is bootstrap.less and not all the .less files.
var gulp = require('gulp'),
gutil = require('gulp-util'),
gulpFilter = require('gulp-filter'),
bowerMain = require('main-bower-files'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
// Group tasks
gulp.task('default', function() {
gutil.log("Test");
});
// Individual tasks
gulp.task('bower', function() {
var jsFilter = gulpFilter('*.js', {restore: true}),
lessFilter = gulpFilter('*.less');
return gulp.src(bowerMain())
// JS
.pipe(jsFilter)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./public/js'))
.pipe(jsFilter.restore)
// CSS
.pipe(lessFilter)
//.pipe(concat('styles.css'))
.pipe(gulp.dest('./temp'))
});
If I gutil.log bowerMain and its not showing all the less files. What am I doing wrong here?
if you check the main section of bower.json for bootstrap it shows below
"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
],
its containing only boostrap.less hence you see only that one less file. Hence nothing wrong with what you are doing...
you can override the main section of boostrap in your bower.json to include other less files if you want, read on how to do it here
I'm trying to get Susy to work with gulp-sass (libsass) and sourcemaps. It's the sourcemaps that seems to be the problem, since without them, everything works as it should. I tried adding the IncludePaths to the Sass task but that didn't help. Susy is installed with Bower and resides in assets/bower_components/susy.
The error I'm getting looks like this:
c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_mo
dules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-ma
p\lib\source-map\source-map-consumer.js:415
throw new Error('"' + aSource + '" is not in the SourceMap.');
^
Error: "/bower_components/susy/sass/susy/language/susy/_container.scss" is not i
n the SourceMap.
at SourceMapConsumer_sourceContentFor [as sourceContentFor] (c:\Users\Devote
e\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-mini
fy-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-ma
p\source-map-consumer.js:415:13)
at SourceMapGenerator.<anonymous> (c:\Users\Devotee\hemsidor\vvv\www\bb2-new
-homepage\htdocs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-
sourcemaps-apply\node_modules\source-map\lib\source-map\source-map-generator.js:
233:42)
at Array.forEach (native)
at SourceMapGenerator_applySourceMap [as applySourceMap] (c:\Users\Devotee\h
emsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-minify-
css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-map\s
ource-map-generator.js:232:34)
at applySourceMap (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs
\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply
\index.js:23:15)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:122:11
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:42:7
at whenSourceMapReady (c:\Users\Devotee\hemsidor\vvv\www\new-project\ht
docs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\clea
n.js:94:62)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\node_modules\clean-css\lib\clean.js:100:77
at fromString (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app
\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\utils\input-
source-map-tracker.js:25:10)
Sorry for the horrible formatting (Bash on Windows..).
My Gulpfile looks like this:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// ==== CONFIGURATION ==== //
// Project paths
var src = 'assets/',
dist = 'dist/',
bower = src + 'assets/bower_components/',
css = dist + 'css/',
js = dist + 'js/'
;
// ### JS-linting-compiling
// Lint and minify our Javascript files
gulp.task('js-linting-compiling', function(){
// read all of the files that are in script/lib with a .js extension
return gulp.src('assets/js/*.js')
// run their contents through jshint
.pipe(jshint())
// report any findings from jshint
.pipe(jshint.reporter('default'))
// concatenate all of the file contents into a file titled 'all.js'
.pipe(concat('all.js'))
// write that file to the dist/js directory
.pipe(gulp.dest(js))
// now rename the file in memory to 'all.min.js'
.pipe(rename('all.min.js'))
// run uglify (for minification) on 'all.min.js'
.pipe(uglify())
// write all.min.js to the dist/js file
.pipe(gulp.dest(js));
});
// ### SASS-TO-CSS
// `gulp sass-to-css` - Compile SASS into CSS, autoprefix it and minify it. Also generate source maps (stripped in minified version)
gulp.task('sass-to-css', function () {
gulp.src('assets/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'assets/bower_components/susy/sass'
],
style: 'expanded',
errLogToConsole: true
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({
suffix: '_min'
}))
.pipe(minifyCSS({
keepSpecialComments:0,
}))
.pipe(gulp.dest(css))
.pipe(reload({stream: true}));
});
// ### Clean
// `gulp clean` - Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
del([
// here we use a globbing pattern to match everything inside the `dist` folder, except our gitkeep file
'dist/**/*',
'!dist/.gitkeep{,/**}'
], { dot: true },
cb);
});
// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['sass-to-css', 'js-linting-compiling'], function() {
});
// ### Gulp
// `gulp` - Clean up the dist directory and do a complete build.
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
browserSync({
proxy: "local.project.dev",
host: "localhost",
notify: true,
});
gulp.watch(['assets/sass/**/*.scss'], ['sass-to-css']);
gulp.watch(['assets/js/**/*.js'], ['js-linting-compiling']);
gulp.watch('**/*.php', function() {
browserSync.reload();
});
});
Any ideas?
I had the same issue...
Trying to use the includePaths,
the #import in the sass file....
mixing one then the other then both ...
The only thing that has worked for me was moving from susy from bower_components to my sass folder, use a "normal" #import, and it worked.
I am not expert in gulp / node, it might look like a path issue => bower_components is outside the src definition of the gulp task... :/
Hope that helps