Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to achieve gulp demo". In daily operation, I believe many people have doubts about how to achieve gulp demo. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to achieve gulp demo"! Next, please follow the editor to study!

1. Prepare:

Install global node and npm, many of which are not covered in detail in this tutorial

Create a new getstart folder, create a package.json in the folder, remember to add {}, and save

two。 From the command prompt, go to the getstart folder and install the node module in turn:

Npm install-save-dev gulp

Npm install-save-dev gulp-less

Npm install-save-dev gulp-watch

Npm install-save-dev require-dir

3. Create new gulpfile.js and gulp folders in the root directory

Create a new tasks folder and config.js file in the gulp folder

Create default.js, less.js, watch.js in the tasks folder.

The tasks file stores the relevant configurations of the corresponding tasks and config.js configuration tasks.

(1) gulpfile.js (gulp entry file). The most basic way to write it is to configure all tasks in this file. Here we do a layer of separation, using require-dir to introduce tasks into gulp/tasks.

Var requireDir = require ('require-dir'); requireDir ('. / gulp/tasks', {recurse: true})

(2) config configuration:

/ * the gulp command will be run by gulpfile.js, so the path to the src and build folders is as follows (under the root directory) * / var src ='. / src'; var dest ='. / build'; module.exports = {less: {all: src + "/ less/**/*.less", / / all less

(3) write default, the default task. Here less and watch tasks are added to the default task:

Var gulp = require ('gulp'); gulp.task (' default', ['less','watch'])

(4) write the less task. The config.js configuration file is introduced here, and the pipe () method is executed in turn, as follows: first get the less source file, then compile it, and * output.

Var gulp = require ('gulp'); var less = require (' gulp-less'); var config = require ('.. / config'). Less; gulp.task ('less', function () {return gulp.src (config.src) / / less source file. Pipe (less (config.settings)) / / execute compilation .pipe (gulp.dest (config.dest)) / / output directory})

(5) write watch tasks

Var gulp = require ('gulp'); var watch = require (' gulp-watch'); var config = require ('.. / config'); gulp.task ('watch', function () {watch (config.less.all, function () {/ / monitor all less gulp.start (' less'); / / modify, execute less task} immediately)})

4. Create the src- > less folder in the root directory. The less files required for the new creation are as follows:

Depending on the config configuration, the less in the less folder is compiled as follows:

@ import "app/a.less"; @ import "app/b.less"

According to the config configuration, all files in the less will be compiled and listened to, and compilation will be executed as soon as there are any changes.

Finally output to build- > css

Try to modify a.less and it will compile automatically.

At this point, the study on "how to achieve gulp demo" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.