fountainjs / generator-fountain-gulp Goto Github PK

following the fountainJs codelab, I created the todomvc app.

here the yo-rc :

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc1",
    "props": {
      "framework": "angular1",
      "modules": "inject",
      "js": "js",
      "ci": [],
      "css": "css",
      "resolved": "/usr/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "todoMVC",
      "router": "uirouter"
    }
  }
}

at the step 8 (npm run build), I have the following lines in the index.html :

    <link rel="stylesheet" href="maps/styles/vendor-d248e3381e.css.map">

    <link rel="stylesheet" href="maps/styles/app-d41d8cd98f.css.map">

  <script src="maps/scripts/vendor-bf8d56b1ee.js.map"></script>

  <script src="maps/scripts/app-97415067b8.js.map"></script>

obviously, it should be :

    <link rel="stylesheet" href="styles/vendor-d248e3381e.css">

    <link rel="stylesheet" href="styles/app-d41d8cd98f.css">

  <script src="scripts/vendor-bf8d56b1ee.js"></script>

  <script src="scripts/app-97415067b8.js"></script>

Unfortunately, I don't know enough of gulp to pinpoint the cause and devise a solution.

I made this opinion while thinking about the website / documentation site. It's a mess to have to explain that depending your options, you have to have different command installed in global.

I think we could get a point where all commands are installed in the local node_modules and triggered by npm scripts. The user will have no more requirement than npm whatever we choose to use inside the generator.

Even Gulp could become a "implementation choice" instead of a "structurant architecture choice" for the user. I also hope that we'll prevent lots of external tool version problem (like gulp 3 for example).

After a fresh installation, I tried to gulp serve, which did not work because of module gulp-minify-html missing, which is required by partials.js. Being deprecated anyway, I think it should be replaced with gulp-htmlmin if possible, or otherwise included in package.json.

[14:00:35] Loading C:\dev\git\test\gulp_tasks\partials.js
module.js:340
    throw err;
    ^

Error: Cannot find module 'gulp-minify-html'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:289:25)
    at Function.Module._load (C:\dev\git\test\node_modules\gulp-hub\lib\load-subfile.js:26:32)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\dev\git\test\gulp_tasks\partials.js:2:20)
    [...]

This task should not be include by default.

If you have this html code on one view

<p>{{ somevalue < 0 ? 'minor' : somevalue }}</p>

gulp dist return

Error in plugin 'gulp-htmlmin'
Message:
    Parse Error: < 0 ? 'minor' : somevalue }}</p>

Description

gulp serve task doesn't handle assets in src directory.

A common practice is to put anything different from html/css/js in an src/assets/folder.
You put here stuff needed by the app at runtime. It means this ressources have to be delivered with app.

Actually the build task handle that with other task, but not in serve. So when you run gulp serve, assets are not copied to .tmp directory.
If you run build task, they are.

Config

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc1",
    "props": {
      "framework": "angular1",
      "modules": "inject",
      "js": "js",
      "ci": [],
      "css": "css",
      "resolved": "C:\\Users\\marco\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-webapp\\node_modules\\generator-fountain-angular1\\generators\\app\\index.js",
      "namespace": "fountain-angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "hello",
      "router": "none"
    }
  }
}

Environment

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v4.4.5
win32 10.0.14393

yo --version
1.8.5

npm --version
3.10.5

quick fix

In misc.js, replace other function with otherServe and otherDist function.

gulp.task('other:serve', otherServe);
gulp.task('other:dist', otherDist);

// ...

function otherServe() {
    const fileFilter = filter(file => file.stat.isFile());

    return gulp.src([
        path.join(conf.paths.src, '/**/*'),
        path.join(`!${conf.paths.src}`, '/**/*.{css,js,html}')
    ])
        .pipe(fileFilter)
        .pipe(gulp.dest(conf.paths.tmp));
}

function otherDist() {
  const fileFilter = filter(file => file.stat.isFile());

  return gulp.src([
    path.join(conf.paths.src, '/**/*'),
    path.join(`!${conf.paths.src}`, '/**/*.{css,js,html}')
  ])
    .pipe(fileFilter)
    .pipe(gulp.dest(conf.paths.dist));
}

In gulpfile.js edit inject and build tasks according to theses changes :

gulp.task('inject', gulp.series(gulp.parallel('other:serve', 'styles', 'scripts'), 'inject'));
gulp.task('build', gulp.series('partials', gulp.parallel('other:dist', 'inject'), 'build'));

It fixes the issue for me. Don't know consequences for others fountainjs generator config.

In gulp-angular-generator (based on gulp 3), I could set the middleware easily to "reverse proxy" my java webapp while running gulp serve on port 3000

Is there an equivalent with fountain js?
Thanks.

https://github.com/FountainJS/generator-fountain-gulp/blob/master/generators/git/templates/gitignore#L5

We don't need to ignore jspm_package for all project

How does the project feel about changing the HubRegistry constructor in "generators/app/templates/gulpfile.js" to use a Glob Pattern instead of explicitly listing out each individual Gulpfile? This could make it easier for Yeoman Composition by others just by adding new Gulp task files to the "gulp_tasks" directory.

So instead of this:

const hub = new HubRegistry(<%- json(gulpFiles) %>);

it would be something like this:

const hub = new HubRegistry( [ 'gulp_files/*.js' ] );

One of the benefits of angluar 2 is to add CSS not globaly but in your component.
Could add a glup task to scan the src folder and compile all less.
This the task i have in the glup in styles.js :

function stylesComponement() {
  return gulp.src(conf.path.src('**/*.less'))
    .pipe(sourcemaps.init())
    .pipe(less({compress: false})).on('error', conf.errorHandler('Less'))
    .pipe(postcss([autoprefixer()])).on('error', conf.errorHandler('Autoprefixer'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(conf.path.src()))
    .pipe(browserSync.stream());
}