title: Node.js read src value from html and get images
body: <p>I am developing a small app (playing around to upgrade my skills) to build static websites using Node.js, Express and Gulp.
  The app consist of PUG template engine to build HTML and an Asset folder, where all my static files resides (images, css, js).</p>
  
  <p>The images folder has a lot of images init and we are not necessarily using all of them. 
  However, what I want to do is;</p>
  
  <ol>
  <li>To be able to read in the html file (index.html)</li>
  <li>Retrieve the path of images</li>
  <li>Fetch images that are being used from the asset directory</li>
  <li>Copy images and create another structure in destination folder with
  the index.html and images</li>
  <li>Zip the final output folder the of website if possible.</li>
  </ol>
  
  <p><strong>Below is a structure of the app.</strong></p>
  
  <pre><code>|- Battlefield
    |- app
      |- Assets
        |- images
      |- Views
        |- html
          |- index.html
        |- pug
          |- index.pug
    |- dest
  </code></pre>
  
  <p><strong>Here is my Gulpfile.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 all files ending with .scss in app/scss and 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 the 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() {
      // to avoid nodemon being started multiple times
      // thanks github user @matthisk
      if (!started) {
        cb();
        started = true;
      }
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Updates:</strong></p>
  
  <p>Here under is package.json:</p>
  
  <pre><code>{
    "name": "Framework",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>For example I have the following HTML.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Node Static files&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img src="images/logo.jpg" alt=""&gt;
    &lt;img src="images/main.jpg" alt=""&gt;
    &lt;img src="images/example.jpg" alt=""&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I want node or gulp, via a command or task, to be able to read that html, find the <code>&lt;img src="..." alt=""&gt;</code> section, retrieve the path of the image.
  Look into the path directory and copy the image to another directory (for restructuring) and then zip the output package.</p>