I'm using the gulp-file-include as a way around HTML includes.
It's basic usage is demo'd as:
<body>
##include('./header.html')
Content
##include('./footer.html')
</body>
With the Gulp setup for the above being:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./'));
});
Now, I've adjusted the above to work for my workflow. My folder structure is as follows:
theme
components
hero
hero.html
index.html
My index.html looks like this:
<body>
##include('./components/hero/hero.html')
</body>
With my Gulp setup being:
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./components'));
});
However, when I run gulp watch then save and access index.html, it just prints the text as a string (rather than print the markup in hero.html). Screenshot below:
Why is this?
Edit
Have also tried running gulp fileinclude which compiled, but still shows the text rather than print the markup.
gulp.task('fileinclude', function(done) {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./components'));
done();
});
Related
I have two folders, dist and partials, the 'dist' folder contains the index.html file and the 'partials' folder contains header.html, navbar.html, and footer.html files. I want to include these partial files into index.html. I tried the gulp-file-include plugin, It works fine but I want that whenever I perform any changes into any partial file, The index.html file should be updated. I'm not able to do this with the gulp-file-include plugin, Please any other solution...?
gulpfile.js
'use strict'
const fileinclude = require('gulp-file-include');
const gulp = require('gulp');
gulp.task('fileinclude', function() {
return gulp.src(['dist/index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('dist'));
});
index.html
##include('../partials/header.html')
##include('../partials/navbar.html')
##include('../partials/footer.html')
Use gulp.watch(...) to track all changes, it's not just for html. Any files in gulp are tracked using this method.
const gulp = require('gulp');
const include_file = require('gulp-file-include');
gulp.task('include', () => {
return gulp.src('./res/*.html')
.pipe(include({
prefix: "##",
basepath: "#file"
}))
.pipe(gulp.dest('./public'));
});
gulp.task('watch', () => {
gulp.watch('./res/*.html', gulp.series('include'));
})
also my variant:
const { src, dest, watch } = require('gulp'),
include_file = require('gulp-file-include');
function include() {
return src('./res/*.html')
.pipe(file_include({
prefix: '#',
basepath: '#file'
}))
.pipe(dest('./public/'));
}
function watching() {
watch('./res/*.html', include);
}
exports.watch = watching;
then:
gulp watch
i have a problem with my gulp.
Its works fine and its really fast but Gulp is compiling all js files in my project...
my gulp-watch:
gulp.task('watch', function () {
gulp.watch(sassFilesWatch, ['styles']);
gulp.watch(jsFilesWatch, ['uglify'])
});
My array:
var jsFilesWatch = [
'clients/*/template/lib/jscripts/*.js',
'clients/*/template/modules/**/*.js',
'system/lib/jscripts/*.js',
'system/mod/**/*.js',
'clients/core/modules/**/*.js',
'!/**/*.min.js'
];
Thats my function:
gulp.task('uglify', function(){
pump([
gulp.src(jsFilesWatch, {
base: './'
}),
debug({
title: 'Compiled',
showFiles: false,
}),
uglify(),
rename({ suffix: '.min' }),
gulp.dest('./')
]);
});
And thats the output:
Output
Just my saved file should be compiled
how can i do that?
thanks alot
It seems all your files with .js extensions are
being debugged, uglified and minified.
Which saved file are you trying to compile?
**/*.js uses the gulp command to watch all files with the .js extension in all folders.
You could use .pipe()
var uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js', function() {
gulp.src('scripts/*.js')
.pipe(uglify())
.pipe(concat('script.js'))
.pipe(gulp.dest('assets'))
});
Have a look into this Plugin, That will solve your problem
https://www.npmjs.com/package/gulp-changed
Try Changing your task to,
gulp.task('uglify', function(){
pump([
gulp.src(jsFilesWatch, {
base: './'
}),
changed('dist'),
ngAnnotate(),
debug({
title: 'Compiled',
showFiles: false,
}),
uglify(),
rename({ suffix: '.min' }),
gulp.dest('./')
]);
});
Note: this might run all your .js files at first time after you run your task, but it will identify the changed file on subsequent runs
This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 4 years ago.
I have a vanilla project where I import the basic frameworks I am going to use like js,Bootstrap and others.
I have a index file like so,
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="frameworks/jquery.js"></script>
<script type="text/javascript" src="frameworks/p5.js"></script>
<link href="frameworks/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="application/javascript" src="frameworks/bootstrap/js/popper.js"></script>
<script type="application/javascript" src="frameworks/bootstrap/js/bootstrap.js"></script>
</head>
<body>
Hello, foo!
</body>
</html>
If I am going to have multiple html files like, bar.html foo.htmlm I would need to link all the files again in that file which is going to be hectic. What is the solutions for this? How can I just import once and use across all .html files?
You need to use a templating engine like Handlebars, EJS or Swig. I would recommend EJS out of those suggestions. These templating engines have a concept called "partials" that you would want to use.
Here is a Stack Overflow question about EJS partials. Essentially, partials allow you to use smaller templates in your templates. So you can create a partial called "header.html" and include it multiple templates like "home.html" or "article.html."
Well I have 2 options for you
1. Use GULP
you can read more about gulp here
In short gulp helps bind different modules into a complete HTML file.
Lets say you have footer.html, header.html which contains header information such as CSS and JS.
There will be gulpfile.js where you define how you want to generate Final HTML code and many other stuffs.
My gulpfile.js looks like this. All steps are self explanatory
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
pump = require('pump'),
rigger = require('gulp-rigger'),
imagemin = require('gulp-imagemin'),
imageminJpegRecompress = require('imagemin-jpeg-recompress'),
imageminSvgo = require('gulp-imagemin').svgo,
imageminPngquant = require('imagemin-pngquant'),
browserSync = require('browser-sync').create(),
watch = require('gulp-watch'),
del = require('del');
var task = {};
var path = {
build: {
html: 'dist/',
stylesheets: 'dist/assets/stylesheets/',
img: 'dist/assets/images/',
javascript: 'dist/assets/javascript/',
fonts: 'dist/assets/fonts/'
},
src: {
html: 'src/*.html',
stylesheets: 'src/assets/stylesheets/*.scss',
img: 'src/assets/images/**/*.*',
javascript: 'src/assets/javascript/**/*.js',
fonts: 'src/assets/fonts/**/*.*'
},
watch: {
html: 'src/**/*.html',
stylesheets: 'src/assets/stylesheets/**/*.scss',
img: 'src/assets/images/**/*.*',
javascript: 'src/assets/javascript/**/*.js',
fonts: 'src/assets/fonts/**/*.*'
}
};
// HTML
gulp.task('html:build', task.html = function () {
gulp.src(path.src.html)
.pipe(rigger())
.pipe(gulp.dest(path.build.html))
.pipe(browserSync.reload({
stream: true
}));
});
//Stylesheets
gulp.task('sass:build', function () {
return gulp.src(path.src.stylesheets)
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(path.build.stylesheets))
.pipe(browserSync.reload({
stream: true
}));
});
// JAVASCRIPT
gulp.task('javascript:build', task.javascript = function () {
gulp.src(path.src.javascript)
.pipe(uglify())
.pipe(gulp.dest(path.build.javascript))
.pipe(browserSync.reload({
stream: true
}));
});
// FONTS
gulp.task('fonts:build', task.fonts = function () {
gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts))
.pipe(browserSync.reload({
stream: true
}));
});
//Images
gulp.task('img:build', task.img = function () {
gulp.src(path.src.img)
.pipe(imagemin([
imageminJpegRecompress({quality: 'low'}),
imageminSvgo(),
imageminPngquant({nofs: true, speed: 1})
]))
.pipe(gulp.dest(path.build.img))
.pipe(browserSync.reload({
stream: true
}));
});
// Server
gulp.task('server:build', function() {
browserSync.init({
port : 3200,
server: {
baseDir: "dist",
routes: {
'/node_modules': 'node_modules'
}
},
notify: {
styles: {
top: 'auto',
bottom: '0'
}
},
open: true
});
});
gulp.task('build', [
'html:build',
'sass:build',
'server:build',
'img:build',
'javascript:build',
'fonts:build'
]);
gulp.task('watch', function () {
watch([path.watch.stylesheets], function (event, cb) {
gulp.start('sass:build');
});
watch([path.watch.html], function (event, cb) {
gulp.start('html:build');
});
watch([path.watch.img], function (event, cb) {
gulp.start('img:build');
});
watch([path.watch.javascript], function (event, cb) {
gulp.start('javascript:build');
});
watch([path.watch.fonts], function (event, cb) {
gulp.start('fonts:build');
});
});
gulp.task('default', ['build', 'watch']);
2. Have a main index.html where you load all scripts and css
Have a container where you load your htmls inside that container. In this case your URL will remain static and only content will change.
you don't need to load scrips and css as they are already loaded.
there are some points to note though
you need to maintain a unique id across all files, as id's might clash same goes for css.
I am trying to set the Gulp tasks for styles with postcss, CSS modules etc., but for now only the watch task for the main HTML file is working, and it is not even creating the main CSS file nor the temp folder so I get the error in the console that it can not find the styles.css. It's driving me crazy for days but just cannot get to the bottom of it. Here is my file structure, pretty basic:
application -> views -> index.html
public -> gulp -> tasks -> styles.js, watch.js
-> styles (styles.css inside, base and modules for CSS subfolders)
And here are the styles and watch tasks:
var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
notify: false,
server: {
baseDir: "../application/views"
}
});
watch('../application/views/index.html', function(){
browserSync.reload();
});
watch('../application/public/styles/**/*.css', function(){
gulp.start('cssInject');
});
});
gulp.task('cssInject', ['styles'], function(){
return gulp.src('../application/temp/styles')
.pipe(browserSync.stream());
});
Styles:
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
hexrgba = require('postcss-hexrgba');
gulp.task('styles', function(){
return gulp.src('../application/public/styles/styles.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
.on('error', function(errorInfo){
console.log(errorInfo.toString());
this.emit('end');
})
.pipe(gulp.dest('../application/temp/styles'));
});
If someone can give a piece of advice I would be really grateful.
Experiencing a weird problem that I'm wondering if other people have encountered.
Basically I'm having an issue that when my gulp watch is ran it creates a assets folder inside appName (path: appName/assets/js/modules.js)
It is also making a js file in the assets inside the app folder structure which you can see below.
My question is why is there an assets folder being created as a child of appName when my watch scripts run?
It seems this is default behaviour from Ionic but would like to know how to stop it from being created and just rely on the js file inside app/assets/js/.
I have the below folder structure:
appName
assets // UNWANTED
js
www
app
shared
states
modules.js
routes.js
assets
css
libs
img
js
index.html
gulpfile.js
ionic.project
This is my gulp file:
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sh = require('shelljs');
var paths = {
sass: ['./www/assets/scss/**/*.scss']
};
gulp.task('default', ['sass', 'scripts']);
// Task is to compile the Sass into one file.
gulp.task('sass', function () {
return gulp.src('./www/assets/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./www/assets/css'));
});
// Task is to watch for any changes
gulp.task('watch', function () {
gulp.watch(paths.sass, ['sass']);
gulp.watch('./www/app/**/*.js', ['scripts']);
});
// Concatenates all of our JS into one file.
gulp.task('scripts', function () {
return gulp.src('./www/app/**/*.js')
.pipe(concat('modules.js'))
.pipe(gulp.dest('./www/assets/js/'));
});
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();
});
and this is my ionic.project file:
{
"name": "figr",
"app_id": "",
"gulpStartupTasks": [
"sass",
"scripts",
"watch"
],
"watchPatterns": [
"www/**/*",
"www/assets/**/*",
"!www/lib/**/*"
]
}
* UPDATE *
I've updated my question so you can more easily see the folder structure. The problem is that the gulp 'scripts' task appears to be placing modules.js in '/appname/assets/js' (marked with 'UNWANTED' in the folder structure diagram) as well as in './www/assets'.
No idea why. If someone knows please let me know.
but restarting my computer and then running ionic serve fixed my problem. I didn't have to write any code differently just a reboot..
If anyone knows why please add an answer and I'll accept it.
Cheers