The gulpAcademy, getting to know NPM, Node, and gulp using the gulp-starter project.
This exercise will expose the basics of Node Package Manager, here after refered as NPM. With this exercise concepts like preinstall, postinstall, scripts, dependencies, devdependencies will be addressed.
If you already run, npm install
, then run npm uninstall gulp
.
If you didn't run yet npm install
, then:
- remove the
"gulp": "^3.9.0",
dependency fromdevDependencies
property of package.json. - reinstall the package with
npm install
- run the script gulp from package.json with
npm run gulp
.
What is happening? How can I restore back my package to be able to run the script npm run gulp
?
- run
for package in `ls node_modules`; do npm uninstall $package; done;
- run
npm install --production
- run
npm run gulp
What is happening? Why I can get the script gulp to work again? npm-install
C) Provide a script that prints the package.json configuration of the project into the CLI before installation.
The script should output some logs in the command line, like "Hello world Scripting!".
-
Note that to make a .js file executable by node we'll have to add the following at the top of the file
#! /usr/bin/env node
node command line tool -
Set a bin property under package.json that will generate an executable script under /Users/your_user_name/.nvm/v0.10.30/bin after performing a global installation of your package. bin property of package.json
This exercise will force you to debug this big gulp project. During the exercise concepts like sequence of tasks, live debugging, target vs. src I/O operations, streams vs callbacks and configuration will be exposed.
Bring in node-inspector debug tool into project and start debugging!
Note, please do not install it as a global dependency. In order to use this depencency, only in our development enviroment, we will list it in the according section of package.json. Then we will run the npm install
command again, and we'll use this as a development only feature.
./node_modules/node-inspector/bin/node-debug.js ./node_modules/gulp/bin/gulp.js --gulpfile ./gulpfile.js
You can also use gulp-util, and gulp-debug along the source code of the tasks to produce usefull logs and discover what are the tasks doing...
C) Which files will be removed on each execution of the default task? Which files will never be removed?
E) Change the name of the generated sass file _icons.sass to something else at runtime without modifying the src code. Verify the result.
F) Why is the output of the generateIconSass.js writing a file under src/ and not under public/ (the target build folder)?
G) Compare the tasks clean
and css
, why one is using the callback mechanism and the other one the return stream mechanism?
This exercise will expose the basics of pipe line streams, errorcodes and callbacks.
As you run the command npm run gulp
you will realise the following error is thrown in the console.
/Users/pablomolina/Projects/gulpAcademy/node_modules/gulp-iconfont/node_modules/gulp-ttf2woff2/node_modules/ttf2woff2/jssrc/ttf2woff2.js:1
aughtException",(function(ex){if(!(ex instanceof ExitStatus)){throw ex}}));Mod
^
Error: no writecb in Transform class
at afterTransform (/Users/pablomolina/Projects/gulpAcademy/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:95:33)
at TransformState.afterTransform (/Users/pablomolina/Projects/gulpAcademy/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:79:12)
Please indentify and fix the error.
-
Hint, what was the last task executed?
-
Could we use any tool to find what was the last bit executed that caused the problem?
Once this error is fixed, is there any other errors? Fix them.
- Write a gulp plugin in prefixTimestamp.js that appends an
@Author
and@Date
timestamp tags at the begging of each file processed in a JS comment syntax.
/**
* @Author [email protected]
* @Date: 1444042345638
*/
- Write a 'postJS' task that gets all files generated by webpack target folder publish/javascripts and pipes such files through the newly created plugin, at the end, the files should also reside in publish/javascripts but contain the timestamp and author tags in a JS comment. Note that the plugin should also produce some logs of the file being processed.
[12:52:25] Appending timestamp and author tag to: /Users/pablomolina/Projects/gulpAcademy/public/javascripts/1.1.js
[12:52:25] Appending timestamp and author tag to: /Users/pablomolina/Projects/gulpAcademy/public/javascripts/2.2.js
[12:52:25] Appending timestamp and author tag to: /Users/pablomolina/Projects/gulpAcademy/public/javascripts/app.js
[12:52:25] Appending timestamp and author tag to: /Users/pablomolina/Projects/gulpAcademy/public/javascripts/page.js
[12:52:25] Appending timestamp and author tag to: /Users/pablomolina/Projects/gulpAcademy/public/javascripts/shared.js