Gulp-less Learning Tutorials

Process
Installation Nodejs, global installation Gulp, Project installation Gulp, and Gulp plug-in configuration Gulpfile.js-run tasks
node, NPM installation
Search by yourself
Global Installation Gulp

NPM Install Gulp-g

After the installation is finished, enter

Gulp-v

See version, Mine is

[ten:3.9. 1

New Package.json File
Under the root directory of the project to create a new Package.json file, open the command line in the folder, win users press shift+ right mouse button, enter

NPM Init

It is possible to write JSON files manually if the fill fails, but to remove the comments, the JSON file cannot have comments.

{"name":"Mickey",//project name (required)"version":"1.0.0",//Project version (required)"Description":"This was for study gulp-less project!",//Item description (required)"Homepage":"",//Project Home"Repository": {//Project Resource Library"type":"git","URL":"https://git.oschina.net/xxxx"},"author": {//Project Author Information"name":"Mickey","Email":"[email protected]"},"License":"ISC",//Project License Agreement"devdependencies": {//plug-ins for project Dependencies"Gulp":"^3.9.1","gulp-less":"^3.0.5"}}

At this point, we open the command-line input in the root directory

NPM Help Package.json

will open in the default browser Package.json
Local Installation Gulp

NPM Install Gulp--save-dev

Warn ignored, Mickey the principle is that no error is correct ~ ~ >.<

This shows that the root directory of the small white is not a Readme file

then install gulp-less locally

NPM Install gulp-less--save-dev

Of course, there are also warn missing readme files
At this point, we will see the node_modules file in the root directory, this file is the plugin we just installed, open node_modules, we will see that there are two of files

Gulpgulp-less

At this point, we have a global installation of Gulp, the project also installed Gulp, the global installation Gulp is to perform gulp tasks, local installation Gulp is to invoke the Gulp plug-in function locally
New Gulpfile.js File

Create a new Gulpfile.js file in the local root directory

varGulp = require ('Gulp'),//Where to install the Gulp locallyless = require ('gulp-less');//Define a mikiless task (own definition)Gulp.task ('mikiless', function () {GULP.SRC ('src/less/test.less')//The file that the task targets. Pipe (less ())//The module that the task calls. Pipe (Gulp.dest ('Src/css'));//The test.css will be generated under SRC/CSS}); Gulp.task ('default',['mikiless']);//Defining default Tasks//Gulp.task (name[, Deps], fn) defining Tasks Name: Task Name Deps: Dependent Task name fn: callback function//gulp.src (globs[, Options]) perform task processing file globs: The path of the file processed (string or array of strings)//gulp.dest (path[, Options]) after processing the file generation path

Compile less
At this point, we set up the Src folder under the root directory, src inside Add less,css folder, in the less folder to write a test.less file
Then open the command line in the root directory
Enter Gulp mikiless or gulp, as shown below

The compilation is successful, at which point we can see our compiled test.css under SRC\CSS.

Mickey will only be compiled manually using the command line, is it a slash and burn, have the great God taught me how to configure less automatic compilation in idea? ~~

Gulp-less Learning Tutorials