It seems that example-template.dust somehow gets cached. The first time running the gulp default task it correctly takes the current version of example-template.dust and renders it correctly in index.html.
But later changes to example-template.dust aren't included in the rendered index.html even though the watch task correctly fires and executes the dust task.
I'm thinking it has to do with some configuration errors.
Here is the gulp tasks and templates. Everything else works.
example-template.dust
Hello, from a template. Rendered with <b>{type}</b>
index.html
<!DOCTYPE html>
<html>
<head>
<title>{name}</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<h1>version \{version}</h1>
<p>
{>example-template type="gulp"/}<br/>
There are special escape tags that you can use to escape a raw { or } in dust.<br/>
{~lb}hello{~rb}
</p>
<script src="main.js"></script>
</body>
</html>
gulp-dust-html task
var gulp = require('gulp');
var dust = require('dustjs-linkedin');
var browserSync = require('browser-sync');
var error = require('./errorHandling.js');
var dusthtml = require('gulp-dust-html');
var config = require('../../config.js');
gulp.task('dust', function () {
return gulp.src(config.build.src+'/**/*.html')
.pipe(dusthtml({
basePath: config.build.src+'/',
data: config.build.data
}))
.on('error', error)
.pipe(gulp.dest(config.build.dev+'/'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('watch-dust', ['dust'], browserSync.reload);
watch task
var gulp = require('gulp');
var watch = require('gulp-watch');
var reload = require('browser-sync').reload;
var config = require('../../config.js');
gulp.task('watch', function() {
gulp.watch(config.build.src+"/**/*.scss", ['sass', reload]);
gulp.watch(config.build.images, ['images', reload]);
gulp.watch([config.build.src+"/**/*.dust"], ['watch-dust', reload]);
gulp.watch([config.build.src+"/**/*.html"], ['watch-dust', reload]);
});
default gulp task
gulp.task('default', ['browserSync','images', 'iconFont', 'sass', 'js', 'dust', 'watch']);
I'm open for alternative suggestions as well.
Atm I'm thinking it could be an idea to use https://www.npmjs.com/package/gulp-shell and link it to the watch task.
ps: I don't have enough reputation to create a gulp-dust-html tag
As #Interrobang said, dust.config.cache = false solved it.
Here is the updated gulp-dust-html module (not on npm)
'use strict';
var gutil = require('gulp-util');
var path = require('path');
var fs = require('fs');
var through = require('through2');
var dust = require('dustjs-linkedin');
module.exports = function (options) {
if (!options)
options = {}
var basePath = options.basePath || '.';
var data = options.data || {};
var defaultExt = options.defaultExt || '.dust';
var whitespace = options.whitespace || false;
dust.config.cache = options.cache || false; //default cache disabling of templates.
dust.onLoad = function(filePath, callback) {
if(!path.extname(filePath).length)
filePath += defaultExt;
if(filePath.charAt(0) !== "/")
filePath = basePath + "/" + filePath;
fs.readFile(filePath, "utf8", function(err, html) {
if(err) {
console.error("Template " + err.path + " does not exist");
return callback(err);
}
try {
callback(null, html);
} catch(err) {
console.error("Error parsing file", err);
}
});
};
if (whitespace)
dust.optimizers.format = function (ctx, node) { return node; };
return through.obj(function (file, enc, cb) {
if (file.isNull()) {
this.push(file);
return cb();
}
if (file.isStream()) {
this.emit('error', new gutil.PluginError('gulp-dust', 'Streaming not supported'));
return cb();
}
try {
var contextData = typeof data === 'function' ? data(file) : data;
var finalName = typeof name === 'function' && name(file) || file.relative;
var tmpl = dust.compileFn(file.contents.toString(), finalName);
var that = this;
tmpl(contextData, function(err, out){
if (err){
that.emit('error', new gutil.PluginError('gulp-dust', err));
return;
}
file.contents = new Buffer(out);
file.path = gutil.replaceExtension(file.path, '.html');
that.push(file);
cb();
})
} catch (err) {
this.emit('error', new gutil.PluginError('gulp-dust', err));
}
});
};
Related
My webpage provides functionallity to convert pdf to image.
For Webpage i am using Firebase Hosting and for functions obvs Functions.
But after file upload function logs error in firebase dashboard Boundary not found
Below is the code i used to upload file in html:
function uploadFile() {
var file = document.getElementById("file_input").files[0];
var pass = document.getElementById("pass").value;
console.log(file + pass);
var formdata = new FormData();
formdata.append("file", file);
formdata.append("password", pass);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "/upload");
ajax.setRequestHeader("Content-Type", "multipart/form-data");
ajax.send(formdata);
}
and this is the code of functions:
var functions = require('firebase-functions');
var process;
var Busboy;
var path = require('path');
var os = require('os');
var fs = require('fs');
exports.upload = functions.https.onRequest((req, res) => {
const busboy = new Busboy({ headers: req.headers });
const fields = {};
const tmpdir = os.tmpdir();
const uploads = {};
const fileWrites = [];
var pass = '';
busboy.on('file', (fieldname, file, filename) => {
console.log(`Processed file ${filename}`);
const filepath = path.join(tmpdir, filename);
uploads[fieldname] = filepath;
const writeStream = fs.createWriteStream(filepath);
file.pipe(writeStream);
const promise = new Promise((resolve, reject) => {
file.on('end', () => {
writeStream.end();
});
writeStream.on('finish', resolve);
writeStream.on('error', reject);
});
fileWrites.push(promise);
});
busboy.on('field', function (fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) {
pass = val;
});
busboy.on('finish', function () {
console.log('Done parsing form!');
console.log(pass);
console.log(uploads);
process.processCard(uploads['file'], pass, 2).then((s) => {
res.end(`
<!DOCTYPE html>
<html>
<body>
ImageConverted!!
<img src="data:image/jpeg;base64,${s}" width="90%"></img>
</body>
</html>
`);
}).catch((err) => { res.end('Error: ' + err) });
});
busboy.end(req.body);
});
What am i doing wrong ?
For multipart body it is recommended to use req.rawBody instead of req.body
https://stackoverflow.com/a/48289899/6003934
Following is the code I inherited for gulp and browserify
'use strict';
var gulp = require('gulp'),
browserify = require('browserify'),
glob = require('glob'),
path = require('path'),
source = require('vinyl-source-stream'),
notifier = require('node-notifier'),
_ = require('underscore'),
watchify = require('watchify'),
jshint = require('gulp-jshint'),
chalk = require('chalk'),
del = require('del'),
webserver = require('gulp-webserver'),
cleanCSS = require('gulp-clean-css'),
babelify = require("babelify"),
jasmine = require('gulp-jasmine');
var browserifyables = './web-app/**/*-browserify.js';
function logError(error){
/* jshint validthis: true */
notifier.notify({
title: 'Browserify compilation error',
message: error.toString()
});
console.error(chalk.red(error.toString()));
this.emit('end');
}
function bundleShare(b, config) {
b.bundle()
.on('error', logError)
.pipe(source(config.destFilename))
.pipe(gulp.dest(config.destDir));
}
function browserifyShare(config, watch) {
var browserifyConfig = {
cache: {},
packageCache: {},
fullPaths: true,
insertGlobals: true
};
if(process.env.NODE_ENV !== 'production'){
browserifyConfig.debug = true;
}
var b = browserify(browserifyConfig);
b.transform('browserify-css', {});
b.transform(babelify, {presets: ["es2015"]});
// Need to fix dollar sign getting effed in angular when it gets minified before we can enable
if(process.env.NODE_ENV === 'production'){
b.transform('uglifyify', {global: true});
}
if(watch) {
// if watch is enable, wrap this bundle inside watchify
b = watchify(b);
b.on('update', function(ids) {
ids.forEach(function(id){
console.log(chalk.green(id + ' finished compiling'));
});
bundleShare(b, config);
});
b.on('log', function(message){
console.log(chalk.magenta(message));
});
}
// source to watch
b.add(config.sourceFile);
bundleShare(b, config);
}
gulp.task('minify-css', function() {
var minifyConfig = {compatibility: 'ie8'};
if(process.env.NODE_ENV !== 'production'){
minifyConfig.debug = true;
}
return gulp.src('./web-app/css/*/*.css')
.pipe(cleanCSS(minifyConfig))
.pipe(gulp.dest('./web-app/css'))
;
});
gulp.task('browserify', ['minify-css'], function(){
glob(browserifyables, {}, function(err, files){
_.each(files, function(file){
browserifyShare({
sourceFile: file,
destDir: path.dirname(file),
destFilename: path.basename(file).replace('-browserify', '')
});
});
});
});
I run the gulp task using
NODE_ENV='production' gulp browserify
The gulp tasks complete but does not terminate. The following is the output
[22:40:57] Using gulpfile ~/some/dir/Gulpfile.js
[22:40:57] Starting 'minify-css'...
[22:40:58] Finished 'minify-css' after 565 ms
[22:40:58] Starting 'browserify'...
[22:40:58] Finished 'browserify' after 2.12 ms
This slows down my build on jenkins considerably.
However if i comment out this line:
b.add(config.sourceFile);
The tasks exit but then it does not work ( for obvious reasons ).
So not sure what I am missing here. I need to figure out what prevents the task from exiting.
How to upload the image in angularjs and mysql and node.js?
<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app = "myApp">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>
</body>
</html>
AngularJs is a client side language. so it is not able to direct save data to MySql.
If any data is store in a database or in a server you must used any server side language.
You are create a web service that can tack response from client side (AngularJS) and send proper response.
File Upload in Mysql using NodeJs
fs.open(temp_path, 'r', function (status, fd) {
if (status) {
console.log(status.message);
return;
}
var buffer = new Buffer(getFilesizeInBytes(temp_path));
fs.read(fd, buffer, 0, 100, 0, function (err, num) {
var query = "INSERT INTO `files` SET ?",
values = {
file_type: 'img',
file_size: buffer.length,
file: buffer
};
mySQLconnection.query(query, values, function (er, da) {
if (er)throw er;
});
});
});
function getFilesizeInBytes(filename) {
var stats = fs.statSync(filename)
var fileSizeInBytes = stats["size"]
return fileSizeInBytes
}
I'm trying to use gulp-data with gulp-jade in my workflow but I'm getting an error related to the gulp-data plugin.
Here is my gulpfile.js
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
jade = require('gulp-jade'),
data = require('gulp-data'),
path = require('path'),
sass = require('gulp-ruby-sass'),
prefix = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
process = require('child_process');
gulp.task('default', ['browser-sync', 'watch']);
// Watch task
gulp.task('watch', function() {
gulp.watch('*.jade', ['jade']);
gulp.watch('public/css/**/*.scss', ['sass']);
gulp.watch('public/js/*.js', ['js']);
});
var getJsonData = function(file, cb) {
var jsonPath = './data/' + path.basename(file.path) + '.json';
cb(require(jsonPath))
};
// Jade task
gulp.task('jade', function() {
return gulp.src('*.jade')
.pipe(plumber())
.pipe(data(getJsonData))
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('Build/'))
.pipe(browserSync.reload({stream:true}));
});
...
// Browser-sync task
gulp.task('browser-sync', ['jade', 'sass', 'js'], function() {
return browserSync.init(null, {
server: {
baseDir: 'Build'
}
});
});
And this is a basic json file, named index.jade.json
{
"title": "This is my website"
}
The error I get is:
Error in plugin 'gulp-data'
[object Object]
You are getting error because in getJsonData you pass required data as first argument to the callback. That is reserved for possible errors.
In your case the callback isn't needed. Looking at gulp-data usage example this should work:
.pipe(data(function(file) {
return require('./data/' + path.basename(file.path) + '.json');
}))
Full example:
var gulp = require('gulp');
var jade = require('gulp-jade');
var data = require('gulp-data');
var path = require('path');
var fs = require('fs');
gulp.task('jade', function() {
return gulp.src('*.jade')
.pipe(data(function(file) {
return require('./data/' + path.basename(file.path) + '.json');
}))
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('build/'));
});
Use this if you're running the task on gulp.watch:
.pipe(data(function(file) {
return JSON.parse(fs.readFileSync('./data/' + path.basename(file.path) + '.json'));
}))
I'm creating a yeoman generator to make a simple scaffolding for projects.
I would like to include sass bootstrap in the project.
How do I include sass bootstrap to be injected.
I have the following index.js to create the folder and file structures form
files in the templates folder.
This exmaple uses sass files but I would like to include sass bootstrap and I would then change the file structure.
'use strict';
var util = require('util');
var path = require('path');
var yeoman = require('yeoman-generator');
var yosay = require('yosay');
var chalk = require('chalk');
var WordpresscdGenerator = yeoman.generators.Base.extend({
init: function () {
this.pkg = require('../package.json');
this.on('end', function () {
if (!this.options['skip-install']) {
this.installDependencies({
//install sass bootstrap
});
}
});
},
promptUser: function(){
var done = this.async();
console.log(this.yeoman);
var prompts = [{
name: 'appName',
message: 'What is the app called ?'
}];
this.prompt(prompts, function(props){
this.appName = props.appName;
done();
}.bind(this));
},
scaffoldFolder: function(){
this.mkdir('wp-content/themes/dist-theme');
this.mkdir('wp-content/themes/dev-theme');
this.mkdir('wp-content/themes/dev-theme/css');
this.mkdir('wp-content/themes/dev-theme/css/scss');
this.mkdir('wp-content/themes/dev-theme/fonts');
this.mkdir('wp-content/themes/dev-theme/images');
this.mkdir('wp-content/themes/dev-theme/js');
},
copyMainFiles: function(){
this.copy('_gruntfile.js', 'wp-content/themes/gruntfile.js');
this.copy('_package.json', 'wp-content/themes/package.json');
this.copy('_bower.json', 'wp-content/themes/bower.json');
//
this.copy('_base_defaults.scss','wp-content/themes/dev-theme/css/scss/_base_defaults.scss');
this.copy('_base_mixins.scss','wp-content/themes/dev-theme/css/scss/_base_mixins.scss');
this.copy('_base_reset.scss','wp-content/themes/dev-theme/css/scss/_base_reset.scss');
this.copy('_config.scss','wp-content/themes/dev-theme/css/scss/_config.scss');
this.copy('_main.scss','wp-content/themes/dev-theme/css/scss/_main.scss');
this.copy('styles.scss','wp-content/themes/dev-theme/css/scss/styles.scss');
this.copy('styles.css','wp-content/themes/dev-theme/css/styles.css');
this.copy('style.css','wp-content/themes/dev-theme/style.css');
this.copy('base.js','wp-content/themes/dev-theme/js/base.js');
this.copy('screenshot.png','wp-content/themes/dev-theme/screenshot.png');
this.copy('index.php', 'wp-content/themes/dev-theme/index.php');
this.copy('footer.php', 'wp-content/themes/dev-theme/footer.php');
this.copy('functions.php', 'wp-content/themes/dev-theme/functions.php');
this.copy('header.php', 'wp-content/themes/dev-theme/header.php');
this.copy('404.php', 'wp-content/themes/dev-theme/404.php');
//
var context = {
site_name: this.appName
};
}
});
module.exports = WordpresscdGenerator;
create directories and _package.json like below
app/index.js
app/templates
app/templates/_package.json
app/templates/_gruntfile.js
Write like this.
{
"name": "appname",
"version": "0.0.0",
"dependencies": {
"grunt": "~0.4.6",
"grunt-contrib-connect": "~0.9.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-cssmin": "~0.12.2",
"grunt-contrib-watch": "~0.6.1"
}
}
write _gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
server: {
options: {
keepalive: true,
open: false,
middleware: function(){
var middleware = [];
middleware.push(function(req, res, next){
if (req.url !== '/') return next();
res.setHeader('Content-type', 'text/html');
var html = grunt.file.read('app/header.html');
html += grunt.file.read('app/footer.html');
res.end(html);
});
middleware.push(function(req, res, next){
if (req.url !== '/css/main.css') return next();
res.setHeader('Content-type', 'text/css');
var css = '';
var files = grunt.file.expand("app/css/*.css");
for (var i = 0; i < files.length; i++) {
css += grunt.file.read(files[i]);
}
res.end(css);
});
middleware.push(function(req, res, next){
res.statusCode = 404;
res.end('Not Found');
});
return middleware;
}
}
},
concat: {
dist: {
src: ['app/header.html', 'app/footer.html'],
dest: 'build/index.html'
}
},
cssmin: {
css: {
files: {
'build/css/main.css': ['app/css/*.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('serve', ['connect']);
grunt.registerTask('build', ['concat', 'cssmin']);
grunt.registerTask('default', ['build']); // 'default' = 'grunt'
};