Getting overwhelmed - challenges with my Gulp build process on the personal portfolio site

1

Does anyone else get “distracted” working on things that are not HTML, CSS, JS? Does a jr dev need to be able to create a build process for a new project?

I have some experience with development outside FCC. I feel like I should be able to use some tools in my projects. That said I want to complete the course and often get sidetracked on learning relevant things (WordPress, linux servers, etc) that are not where I am on the FCC curriculum.

I will start by saying that Gulp is not a requirement of the personal portfolio project. I usually push my skills outside my comfort zone (maybe too far). I want to use Gulp for all the benefits automating the build process will bring. ( Linting, SASS compilation, local/live environment, minification, CSS pre processing etc.) I think I will be using some kind of build process on the job so it seems like a good skill to learn.

After following automate all the things with Gulp I have a mostly working build process! I understand most of how the build process works. The author responded to one of my comments and helped me refactor the code and “DRY” it out. I dont fully understand how gulp inject changes the Js and stylesheets in the <head> from style.css in my dev files to style.min.css in my deployment files. The comments

<!--[htmlclean-protect]--> // this keeps the commment from being erased during the gulp clean function
    <!-- inject:css --> // This tells gulp-inject where we want our css files to go
    <!-- endinject -->
<!--[/htmlclean-protect]-->
https://github.com/jastuccio/automate-with-gulp

My solution is to use the src non minified files on my server and add a note to my project issues that I am not serving the deployment files. Then go back and fix it sometime in the future.

UPDATE!
Reviewing the authors git repo for this tutorial I figured out that I do not need to load any js files in src/index.html During the build process gulp-inject adds all the js files I have in the src/js directory to tmp/index.html

src file excerpt:

<head>
  ...


  <!--[htmlclean-protect]-->  // "htmlclean-protect prevents the gulp-clean function from deleting these comments
    <!-- inject:css -->
    <!-- endinject -->
  <!--[/htmlclean-protect]-->
</head>
<body>

...

  <!--[htmlclean-protect]-->
    <!-- inject:js -->
    <!-- endinject -->
  <!--[/htmlclean-protect]-->

</body>

</html>

tmp/index.html excerpt (served locally during production for testing and development):

<head>
  ...

  <!--[htmlclean-protect]-->  // "htmlclean-protect prevents the gulp-clean function from deleting these comments
    <!-- inject:css -->
      <link rel="stylesheet" href="css/mdb.free.css">
      <link rel="stylesheet" href="css/style.css">
    <!-- endinject -->
  <!--[/htmlclean-protect]-->
</head>
<body>

...
 <!--[htmlclean-protect]-->
    <!-- inject:js -->
    <script src="js/3rdPartyJS/bootlint.min.js"></script>
    <script src="js/3rdPartyJS/bootstrap.min.js"></script>
    <script src="js/3rdPartyJS/free-mdb.min.js"></script>
    <script src="js/3rdPartyJS/jquery-3.1.1.min.js"></script>
    <script src="js/3rdPartyJS/mdb.min.js"></script>
    <script src="js/3rdPartyJS/tether.min.js"></script>
    <!-- endinject -->
  <!--[/htmlclean-protect]-->

</body>

</html>

The good news: I took one more step towards joining the dark side and ruling the galaxy! ( My understanding of the gulp “machine” that builds my project increased)

potential bad news: My plan for today is to get the contact form on the personal portfolio site working. I spent 2 hours on gulp today.

2

My strategy is to learn what I need to learn only to make a project functional , once the project is functional I move on, some projects require specific libraries (react, d3, et al.) , there you have no choice but to learn them, however peripheral non-project dependent libraries can be a big time killer, not saying they are not useful , but if your goal is to finish a project I suggest focusing on functionality and/or requirements and stepping on.

2 Likes
3

I doubt you would have to create the build process as a new dev but you should understand how they work. As for Gulp, it seems to be gradually getting replaced by npm scripts - they don’t need to write any code and you don’t have to use specialized gulp libraries.

An alternative is to learn Angular 2 and use the CLI, which gives you a whole build process pre-packaged (using Webpack under the hood and npm scripts. I believe there is something similar (but more basic) for React.