GULP Compile less and Build Local Development Environment

STEPS:

• 1. Create a new folder in your own development environment directory, such as opening cmd and creating a new support folder
• 2. Enter Folder
• 3. Generate using NPM Package.jsonfile
• 4. Global installation of gulp
• 5. Install plug-ins locally
• 6. NewGulpfile.jsfile
• 7. Create a folder for static resources, such as project
• 8. Create a storage directory and page html for static resources under the project folder, such as dist files for.less
• 9. Use PHPStorm or WEBStorm right keysGulpfile.js, click'run'default'
• 10. Browser Open http://localhost:8081 , the port number can be configured by itself
  

D:\workspace\C>mkdir Support
D:\workspace\C>cd Support
D:\workspace\C\Support>npm install -g gulp
D:\workspace\C\Support>npm install –save-dev gulp-connect gulp-rename -gulp-less gulp-minify-css

D:\workspace\C\Support>mkdir project
D:\workspace\C\Support>cd project
D:\workspace\C\Support\project>mkdir dist css js img

Interpretation of plug-ins

Gulpfile.jsRelated Configuration

var gulp = require('gulp'),
    connect = require('gulp-connect'),
    rename = require("gulp-rename"),
    less = require("gulp-less"),
    minifyCSS = require('gulp-minify-css');

@Compile LESS file
gulp.task('less_common', function () {
    gulp.src('./project/dist/base.less') // Compile dist base.less
        .pipe(less()) // Processing LESS
        .pipe(minifyCSS()) // Compress CSS
        .pipe(rename({ // Rename Files
            basename: "common.min",
            extname: ".css"
        }))
        .pipe(gulp.dest('./project/css/')
        );
});

@ watch LESS Changes to Files
gulp.task('lessWatch', function () {
    gulp.watch('./application/dist/bse.less', ['less_common']); // MonitorBase.lessChange, save changes when file changes
});

@ Create a local one SERVER
gulp.task('webserver', function () {
    connect.server({
        root: ['project'], // Open directory for server
        livereload: true, // Instant refresh, refresh page when html, css, js change
        port: 8081 // Monitor local port number
    });
});

@Default Tasks
gulp.task('default', ['webserver', 'lessWatch']);