express - Node.js read src value from html and get images -
i developing small app (playing around upgrade skills) build static websites using node.js, express , gulp. app consist of pug template engine build html , asset folder, static files resides (images, css, js).
the images folder has lot of images init , not using of them. however, want is;
- to able read in html file (index.html)
- retrieve path of images
- fetch images being used asset directory
- copy images , create structure in destination folder index.html , images
- zip final output folder of website if possible.
below structure of app.
|- battlefield |- app |- assets |- images |- views |- html |- index.html |- pug |- index.pug |- dest here gulpfile.js
// requiring gulp var gulp = require('gulp'); var sass = require('gulp-sass'); var pug = require('gulp-pug'); var browsersync = require('browser-sync'); var nodemon = require('gulp-nodemon'); gulp.task('hello', function() { //test gulp task 'hello' console.log('hello zell'); }); gulp.task('sass', function() { return gulp.src('app/assets/scss/**/*.scss') // gets files ending .scss in app/scss , children dirs .pipe(sass()) //using gulp-sass .pipe(gulp.dest('app/assets/css')) .pipe(browsersync.reload({ stream: true })) }); gulp.task('pug', /*['copy'],*/ function() { return gulp.src('app/views/pug/**/*.pug') .pipe(pug({ pretty: true })) .pipe(gulp.dest('app/views/html')) .pipe(browsersync.reload({ stream: true })) }); // multiple watch process gulp.task('watch', ['browsersync', 'sass', 'pug'], function() { gulp.watch('app/assets/scss/**/*.scss', ['sass']); gulp.watch('app/views/pug/**/*.pug', ['pug']); // reloads browser whenever html or css or js files change gulp.watch('app/views/html/*.html', browsersync.reload); gulp.watch('app/assets/css/**/*.css', browsersync.reload); gulp.watch('app/assets/js/**/*.js', browsersync.reload); }); gulp.task('browsersync', ['nodemon'], function() { browsersync.init(null, { proxy: "http://localhost:4000", files: ["app/**/*.*"], port: 7000, }); }); gulp.task('nodemon', function(cb) { var started = false; return nodemon({ script: 'server.js' }).on('start', function() { // avoid nodemon being started multiple times // github user @matthisk if (!started) { cb(); started = true; } }); });updates:
here under package.json:
{ "name": "framework", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"error: no test specified\" && exit 1" }, "author": "aumeeruddy ajmal", "license": "isc", "devdependencies": { "browser-sync": "^2.18.8", "gulp": "^3.9.1", "gulp-pug": "^3.3.0", "gulp-sass": "^3.1.0", "express": "^4.15.3", "body-parser": "^1.17.2", "cookie-parser": "^1.4.3", "multer": "^1.3.0", "gulp-nodemon": "^2.2.1" } } for example have following html.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>node static files</title> </head> <body> <img src="images/logo.jpg" alt=""> <img src="images/main.jpg" alt=""> <img src="images/example.jpg" alt=""> </body> </html>and want node or gulp, via command or task, able read html, find <img src="..." alt=""> section, retrieve path of image. path directory , copy image directory (for restructuring) , zip output package.
if want catch updated assets , html files use these 2 packages achieve need. if update gulp4, can have pretty nifty features can out.
all answers gulp can found here : https://github.com/gulpjs/gulp/tree/4.0#sample-gulpfilejs
a note express
because express http server, construct own routes files/assets want serve. example images have urls set in manner in custom express config file: img src='/layout/*.png'
my config, if can out :
'use strict';
const express = require('express'),
path = require('path'), favicon = require('serve-favicon'), serve_static = require('serve-static'), cookie_parser = require('cookie-parser'), body_parser = require('body-parser'), http = require('http'); module.exports = (app, config)=> {
app.set('port', 4000); app.set('views', './server/views/pages/'); app.set('view engine', 'pug'); app.use(cookie_parser()); app.use(body_parser.json()); app.use(body_parser.urlencoded({ extended: true })); app.use('/stylesheets', express.static('./builds/app/stylesheets')); app.use('/scripts', express.static('./builds/app/scripts')); app.use('/fonts', express.static('./builds/app/fonts')); app.use('/images', express.static('./builds/app/images')); }
however, if maintaining solution , need have compiled html sources along other assets delivered party, suggest use gulp package, rewrite paths of assets(strin replacement) in html, css files source prefer. - https://www.npmjs.com/package/gulp-replace
Comments
Post a Comment