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.