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
Plugin Name | Effect |
---|---|
gulp-connect | Set up a local webServer |
gulp-rename | Rename File Name |
gulp-less | Parse LESS file |
gulp-minify-css | Compress CSS files |
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']);