I have just upgraded to Meteor 1.2.1 . I have a local fontello package where the icons are no longer showing on the screen.
The path to the package.js file is:
/packages/fontello/package.js
The content of this file is:
Package.describe({
name: 'fontello',
version: '0.0.1',
summary: '',
git: '',
documentation: 'README.md'
});
Package.onUse(function(api) {
api.versionsFrom('1.0.3.1');
api.addAssets('css/fontello.css', "client");
api.addAssets('css/animation.css', "client");
api.addAssets('font/fontello.eot', "client");
api.addAssets('font/fontello.svg', "client");
api.addAssets('font/fontello.ttf', "client");
api.addAssets('font/fontello.woff', "client");
});
Package.onTest(function(api) {
api.use('tinytest');
api.use('fontello');
api.addFiles('fontello-tests.js');
});
I can't seem to understand why this is?
I figured out that this was because I needed to use addFiles for file extensions instead of addAssets for the css files:
Package.onUse(function(api) {
api.versionsFrom('1.0.3.1');
api.addFiles('css/fontello.css', "client");
api.addFiles('css/animation.css', "client");
api.addAssets('font/fontello.eot', "client");
api.addAssets('font/fontello.svg', "client");
api.addAssets('font/fontello.ttf', "client");
api.addAssets('font/fontello.woff', "client");
});
Related
I'm trying to set up a modular workflow where, when running gulp, it will compile SASS files in a folder to CSS. Those new CSS files will be stored in the same folder.
For example, here's my current folder structure:
theme
- modules
- hero
- hero.html
- hero.scss
Here is my 'gulpfile.js':
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task( 'sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/**/*.css'))
});
However, when running gulp sass, this is what my folder structure looks like:
theme
- **
- *.css
- hero
- hero.css
- modules
- hero
- hero.html
- hero.scss
Whereas what I'm after is:
theme
- modules
- hero
- hero.html
- hero.scss
- hero.css (hero.css to appear here after running gulp)
Am I far off?
If I understand correctly you want to return .css file where .scss file exist. Here is the gulpfile.js code.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss()
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch
package.json file need devDependencies and browserlist. it will be like this.
"devDependencies": {
"autoprefixer": "^9.7.4",
"gulp": "^4.0.2",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2"
},
"browserslist": [
"last 71 version"
],
use $ gulp watch running your task.
Your folder structure like this
Themes
modules
hero
hero.html
hero.scss
header
header.html
header.scss
footer
footer.html
footer.scss
package.json
gulpfile.js
It will return
Themes
modules
hero
hero.html
hero.css
hero.scss
header
header.html
header.css
header.scss
footer
footer.html
footer.css
footer.scss
package.json
gulpfile.js
Hope this help!
gulp.dest() only wants a path, it will then append the current file path to it. And sass() will already have changed the extension to css so that shouldn't be a problem either. So in your case it should work like this.
gulp.task('sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/'));
});
gulp.src tells the Gulp task what files to use for the task,
while gulp.dest tells Gulp where to output the files once the task is completed.
So in your case it should work like this
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task( 'sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/**'))
});
I have a directory structure like this...
--app
-css
custom.css
-sass
custom.scss
-pages
about.html
home.html
--gulpfile.js
--node_modules
--package.json
my gulp file is
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src('app/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css/'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/sass/*.scss', ['sass']);
gulp.watch('app/pages/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: "app",
index: "pages/home.html"
},
})
})
when i run the watch task i am redirected to localhost:3000 that opens my home.html page. and my browser sync works fine.
but when i right click on about.html file and view it in browser in visual studio, browser sync doesn't work in about.html page. and this page opens as localhost:56060/app/pages/about.html in the browser.
How can i make browser sync working in all html files inside pages directory?
or what should be the url address of the browser to access about.html file?
Your code looks fine, try in browser "chrome" past url adress , ofcourse when in Your CMD console command gulp watch is activated
http://localhost:3000/pages/about.html
Remember if you activated browserSync in your case it is started in folder app , this your localhost:3000 server , something like localhost:56060 it is not your page.
In your html files don't forget in css link add "/" before css folder.
<link rel="stylesheet" href="/css/custom.css">
If you have still issue , try this code in gulp task watch :
gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/sass/*.scss', ['sass']);
// gulp.watch('app/pages/*.html', browserSync.reload); // Comment this line
gulp.watch("app/**/*.html").on('change', browserSync.reload); // Try this line
gulp.watch('app/js/**/*.js', browserSync.reload);
})
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: "app",
index: "pages/home.html"
},
})
})
Regards :)
How do I get gulp browser sync to work with MVC ASP.net? It works fine with .html files but it downloads a blank file when I use .cshtml files.
gulp.task("browser-sync", function () {
browserSync({
server: {
baseDir: "./",
proxy: "localhost",
index: "Areas/Music/Views/Songs/Index.cshtml"
}
});
});
gulp.task("watch", function () {
gulp.watch(["js/*.js", "Content/*.css", "Areas/**/*.cshtml"], ["scripts", "css", "html"]);
});
gulp.task("default", ["scripts", "css", "html", "browser-sync", "watch"]);
Try this:
gulp.task('watch', ['tasks', 'you', 'want', 'to', 'run'], function(){
// sass and js watch functions
gulp.watch('./Views/**/*.cshtml').on('change', browserSync.reload);
});
My github page's css is being generated as
http://name.github.io/project/assets/css/main.css, but in the index.html it points to http://name.github.io/assets/css/main.css
I am using Jekyll with Gulp and SASS. I know this would work fine on a real .com domain but how do I make it correct on GitHub Pages?
My gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var cp = require('child_process');
var jade = require('gulp-jade');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll.bat', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
}
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: ['css'],
onError: browserSync.notify
}))
.pipe(plumber())
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/assets/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css'));
});
/*
* trying to Gulp stuff
*/
gulp.task('jade', function() {
return gulp.src('_jadefiles/*.jade')
.pipe(jade())
.pipe(gulp.dest('_includes'));
})
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['sass']);
gulp.watch('assets/js/**', ['jekyll-rebuild']);
gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
gulp.watch(['assets/js/**'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
The _site folder is where all the generated HTML and CSS is. The only solution I can think of is moving the contents from the _site folder to the root of my git repo and deleting everything else that was there before.
In my _config.yml, the basedir is even set to baseurl: github-project-name but still doesn't load.
In _config.yml, set :
baseurl: /project
Then call your assets with :
<link rel="stylesheet" href="{{ "/assets/css/main.css, " | prepend: site.baseurl }}">
I tried to mock Template.__create__ with the code below but I still get the error.
In package.js
Package.describe({
name: 'robwatkin:mypackage',
});
Package.onUse(function(api) {
api.versionsFrom('1.1.0.2');
api.use('meteor-platform');
api.use('iron:router');
api.use('reactive-var');
api.use('templating');
});
Package.onTest(function(api) {
api.use('tinytest');
api.addFiles('mocks.js');
api.use('robwatkin:mypackage');
api.addFiles('tests.js');
});
in mocks.js
Template = {
__create__: function() {console.log('STUB Template.__create__')}
};
in tests.js
Tinytest.add('example', function (test) {
test.equal(true, true);
});
Gives
Uncaught TypeError: Template.__create__ is not a function(anonymous function) # layout.js:286(anonymous function) # iron_layout.js?d62e492972d7f97328c54d2ba052d5adf0cf0d9a:534(anonymous function) # iron_layout.js? d62e492972d7f97328c54d2ba052d5adf0cf0d9a:541
It works fine if I comment out
api.use('robwatkin:mypackage');
Thanks