Skip to content

Task runner dependency configuration

Task runner dependency configuration involves the setup of local development tools, specifically utilizing gulp along with gulp-connect and gulp-livereload to automate file refreshing and server management^[600-developer-frontend-fe-tools-glup-livereload.md]. This configuration ensures that changes in source files trigger automatic browser updates and maintain a local development server^[600-developer-frontend-fe-tools-glup-livereload.md].

Implementation Steps

To implement this workflow, the required dependencies must be installed and defined within the project's package.json file^[600-developer-frontend-fe-tools-glup-livereload.md].

Dependency Installation

The following npm commands install the necessary packages as development dependencies^[600-developer-frontend-fe-tools-glup-livereload.md]:

npm install gulp --save-dev
npm install [gulp-connect](<./gulp-connect.md>) --save-dev
npm install gulp-livereload --save-dev

Package.json Configuration

The package.json file manages the project's metadata and scripts^[600-developer-frontend-fe-tools-glup-livereload.md]. A typical configuration defines a dev script to execute the default Gulp task^[600-developer-frontend-fe-tools-glup-livereload.md]:

{
  "name": "angularjs.code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "gulp default"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "[gulp-connect](<./gulp-connect.md>)": "^5.7.0",
    "gulp-livereload": "^3.8.1"
  }
}

Gulp Task Configuration

The gulpfile.js is used to define the specific tasks for the server, reloading, and file watching^[600-developer-frontend-fe-tools-glup-livereload.md].

Source Configuration

A configuration object is typically defined to manage the source directory path^[600-developer-frontend-fe-tools-glup-livereload.md]:

var config = {
    src : 'src'
}

Server Task

The connect task initializes the development server using gulp-connect^[600-developer-frontend-fe-tools-glup-livereload.md]. It sets the root directory, port, host, and enables the livereload option^[600-developer-frontend-fe-tools-glup-livereload.md]:

gulp.task('connect', function() {
  connect.server({
    root: config.src,  // livereload  根目錄
    port: 3000,
    host: 'localhost',
    livereload: true
  });
});

Reload and Watch Tasks

The reload task specifies which files should trigger a reload, piping them to livereload()^[600-developer-frontend-fe-tools-glup-livereload.md]. The watch task listens for changes in HTML and JavaScript files within the source directory and executes the reload task upon detecting changes^[600-developer-frontend-fe-tools-glup-livereload.md]:

gulp.task('reload', function () {
    gulp.src([config.src + '/*.*'])
        .pipe(livereload());
});

gulp.task('watch', function () {
    livereload.listen({
        start: true,
        basePath: config.src
    });

    // 監控
    gulp.watch([config.src + '/*.html'], ['reload']);
    gulp.watch([config.src + '/*.js'], ['reload']);
});

Execution

The process is started by running the default Gulp task, which bundles the connect, watch, and reload tasks^[600-developer-frontend-fe-tools-glup-livereload.md]. This is typically executed via the npm script defined in the package.json^[600-developer-frontend-fe-tools-glup-livereload.md].

gulp.task('default', ['connect', 'watch' ,'reload']);

Sources

^[600-developer-frontend-fe-tools-glup-livereload.md]

  • [[Gulp]]
  • LiveReload
  • [[npm scripts]]
  • [[Local development server]]