{"id":26028575,"url":"https://github.com/survi218/gulp-configuration","last_synced_at":"2026-03-06T23:33:05.433Z","repository":{"id":139643117,"uuid":"92452659","full_name":"survi218/gulp-configuration","owner":"survi218","description":"Gulp, the task runner for our web project","archived":false,"fork":false,"pushed_at":"2017-05-25T23:43:09.000Z","size":15586,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-26T09:38:07.353Z","etag":null,"topics":["gulp-js","gulp-plugin","gulp-rev","gulp-starter","gulp-tasks","gulp-watch","gulp-webpack","gulp-workflow","gulpfile","gulpjs","jshint-config"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/survi218.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-25T23:28:04.000Z","updated_at":"2017-05-25T23:51:49.000Z","dependencies_parsed_at":"2023-07-23T08:03:49.173Z","dependency_job_id":null,"html_url":"https://github.com/survi218/gulp-configuration","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":0.4,"last_synced_commit":"3fe97e2f71cc45942e162e4802902376f9ac16a5"},"previous_names":["survi218/gulp-configuration","surendravidiyala/gulp-configuration"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/survi218/gulp-configuration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgulp-configuration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgulp-configuration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgulp-configuration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgulp-configuration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/survi218","download_url":"https://codeload.github.com/survi218/gulp-configuration/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgulp-configuration/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30203367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp-js","gulp-plugin","gulp-rev","gulp-starter","gulp-tasks","gulp-watch","gulp-webpack","gulp-workflow","gulpfile","gulpjs","jshint-config"],"created_at":"2025-03-06T17:15:42.651Z","updated_at":"2026-03-06T23:33:05.415Z","avatar_url":"https://github.com/survi218.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-configuration\n\nLet us learn to use Gulp, the task runner. we will install Gulp CLI and install Gulp plugins using NPM. Thereafter you will configure a Gulp file with a set of tasks to build and serve your web project. At the end of this exercise, you will be able to:\nInstall Gulp CLI and Gulp plugins in your project\nConfigure a Gulp file with a set of tasks to build a web project from a source, and serve the built project using a server.\nClean node_modules Folder\nGo to the node_modules folder in conFusion, and delete all the folders/files there. We will not be using the Grunt modules existing there for this exercise.\nInitialize package.json File\nNext, update the package.json file in the conFusion folder with the following content:\n\n{\n  \"name\": \"Project folder\",\n  \"private\": true,\n  \"devDependencies\": {\n\n  },\n  \"engines\": {\n    \"node\": \"\u003e=0.10.0\"\n  }\n}\n\n\nInstalling Gulp\nNote: You should already have Node and NPM installed on your computer before you proceed further. Also, those using OSX or Linux should use sudo while installing global packages in node (when you use the -g flag).\nAt the command prompt, type the following to install Gulp command-line interface (CLI) globally:\n\n\n     npm install -g gulp\n\n\nThis will install the Gulp globally so that you can use it in all projects.\nNext install Gulp to use within your project. To do this, go to the Project folder  and type the following at the prompt:\n\n\n     npm install gulp --save-dev\n\n\nThis will install local per-project Gulp to use within your project.\nInstall Gulp Plugins\nInstall all the Gulp plugins that you will need for this exercise. To do this, type the following at the command prompt:\n\n\nnpm install jshint gulp-jshint jshint-stylish gulp-imagemin gulp-concat gulp\n  -uglify gulp-minify-css gulp-usemin gulp-cache gulp-changed gulp-rev gulp\n  -rename gulp-notify  browser-sync del --save-dev\n\n\nCreating a Gulp File\nNext you need to create a Gulp file containing the tasks to be run when you use Gulp. To do this, create a file named gulpfile.js in the Project folder.\nLoading Gulp Plugins\nLoad in all the Gulp plugins by including the following code in the Gulp file:\n\nvar gulp = require('gulp'),\n    minifycss = require('gulp-minify-css'),\n    jshint = require('gulp-jshint'),\n    stylish = require('jshint-stylish'),\n    uglify = require('gulp-uglify'),\n    usemin = require('gulp-usemin'),\n    imagemin = require('gulp-imagemin'),\n    rename = require('gulp-rename'),\n    concat = require('gulp-concat'),\n    notify = require('gulp-notify'),\n    cache = require('gulp-cache'),\n    changed = require('gulp-changed'),\n    rev = require('gulp-rev'),\n    browserSync = require('browser-sync'),\n    del = require('del');\n\n\nAdding Gulp Tasks\nNext, we will add the code for the JSHint task, the Clean task and the default task as follows:\n\n\ngulp.task('jshint', function() {\n  return gulp.src('app/scripts/**/*.js')\n  .pipe(jshint())\n  .pipe(jshint.reporter(stylish));\n});\n\n// Clean\ngulp.task('clean', function() {\n    return del(['dist']);\n});\n\n// Default task\ngulp.task('default', ['clean'], function() {\n    gulp.start('usemin', 'imagemin','copyfonts');\n});\n\n\n\nNext, paste in the code for the usemin, imagemin and copyfonts tasks:\n\ngulp.task('usemin',['jshint'], function () {\n  return gulp.src('./app/menu.html')\n      .pipe(usemin({\n        css:[minifycss(),rev()],\n        js: [uglify(),rev()]\n      }))\n      .pipe(gulp.dest('dist/'));\n});\n\n// Images\ngulp.task('imagemin', function() {\n  return del(['dist/images']), gulp.src('app/images/**/*')\n    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: \n      true })))\n    .pipe(gulp.dest('dist/images'))\n    .pipe(notify({ message: 'Images task complete' }));\n});\n\ngulp.task('copyfonts', ['clean'], function() {\n   gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')\n   .pipe(gulp.dest('./dist/fonts'));\n   gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')\n   .pipe(gulp.dest('./dist/fonts'));\n});\n\n\nFinally, we add the code for the watch and browserSync tasks:\n\n// Watch\ngulp.task('watch', ['browser-sync'], function() {\n  // Watch .js files\n  gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', \n    ['usemin']);\n      // Watch image files\n  gulp.watch('app/images/**/*', ['imagemin']);\n\n});\n\ngulp.task('browser-sync', ['default'], function () {\n   var files = [\n      'app/**/*.html',\n      'app/styles/**/*.css',\n      'app/images/**/*.png',\n      'app/scripts/**/*.js',\n      'dist/**/*'\n   ];\n\n   browserSync.init(files, {\n      server: {\n         baseDir: \"dist\",\n         index: \"menu.html\"\n      }\n   });\n        // Watch any files in dist/, reload on change\n  gulp.watch(['dist/**']).on('change', browserSync.reload);\n    });\n\n\nSave the Gulp file\nRunning the Gulp Tasks\nAt the command prompt, if you type gulp it will run the default task:\n\n\n     gulp\n\n\nUsing BrowserSync and Watch\nWe configured the BrowserSync and the Watch tasks in the Gulp file. To use them, type the following at the command prompt:\n\n\n     gulp watch\n\n\nwe may need to reload the page in the browser.\nwe can edit the menu.html file in the app folder and see the watch task and BrowserSync action in reloading the updated page.\nConclusions\nIn this exercise, we learnt to use Gulp, install Gulp plugins, configure the gulpfile.js and then use Gulp to automate the web development tasks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurvi218%2Fgulp-configuration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurvi218%2Fgulp-configuration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurvi218%2Fgulp-configuration/lists"}