How to configure an efficient development environment using Express+Less+Gulp
This article mainly introduces how to use Express+Less+Gulp to configure an efficient development environment, which is very detailed and has a certain reference value. Friends who are interested must finish reading it!
Configuration
Here's how I configure it:
My directory structure: ├── app.js # Express Server ├── bin │ └── www # launch Server ├── dist # compilation compressed directory (deployment directory) │ ├── css │ ├── img │ ├── js │ ├── views │ └── lib # third-party library directory (bower installation) ├── .bowerrc # bower front-end installation library ├── gulpfile .js # Gulp configuration file ├── package.json ├── public # Development directory │ ├── img │ ├── js │ └── less ├── routes │ ├── index.js │ └── users.js └── views # html ├── error.ejs └── index.ejspackage.json file content: {"name": "voteapp" "version": "1.0.0", "description": "", "main": "app.js", "dependencies": {"body-parser": "~ 1.13.2", "cookie-parser": "~ 1.3.5", "debug": "~ 2.2.0", "ejs": "~ 2.3.3", "express": "~ 4.13.1" "morgan": "~ 1.6.1", "serve-favicon": "~ 2.3.0"}, "devDependencies": {"browser-sync": "^ 2.18.6", "del": "^ 2.2.2", "gulp": "^ 3.9.1", "gulp-cache": "^ 0.4.5", "gulp-clean-css": "^ 2.3.2" "gulp-concat": "^ 2.6.1", "gulp-ejs": "^ 2.3.0", "gulp-htmlmin": "^ 3.0.0", "gulp-imagemin": "^ 3.1.1", "gulp-less": "^ 3.3.0", "gulp-livereload": "^ 3.8.1", "gulp-nodemon": "^ 2.2.1" "gulp-uglify": "^ 2.0.0", "gulp-watch": "^ 4.3.11"}, "scripts": {"test": "echo\" Error: no test specified\ "> gulpfile.js file 'use strict' Var gulp = require ('gulp'); var minify = require (' gulp-clean-css'); var browserSync = require ('browser-sync'); var nodemon = require (' gulp-nodemon'); var cache = require ('gulp-cache'); var uglify = require (' gulp-uglify'); var htmlmin = require ('gulp-htmlmin'); var imagemin = require (' gulp-imagemin'); var less = require ('gulp-less'); var path = require (' path'); var livereload = require (gulp-livereload') Var concat = require ('gulp-concat'); var jshint = require (' gulp-jshint'); var cssBase64 = require ('gulp-base64'); var del = require (' del'); / / delete file gulp.task ('clean', function (cb) {del ([' dist/css/*', 'dist/js/*',' dist/img/*','dist/views/*'], cb)}) / / compress ejsgulp.task ('ejs', function () {return gulp.src (' views/**/*.ejs') .pipe (htmlmin ({collapseWhitespace: true})) .pipe (gulp.dest ('dist/views/'));}) / / compress lessgulp.task ('less', function () {return gulp.src (' public/less/**/*.less') .pipe (less ({paths: [path.join (_ _ dirname, 'less',' includes')]})) .pipe (cssBase64 ()) .pipe (minify ()) .pipe (gulp.dest ('dist/css/'));}) / / compress jsgulp.task ('js', function () {return gulp.src (' public/js/**/*.js') .pipe (jshint ()) .pipe (jshint.reporter ('default')) .pipe (uglify ({compress: true})) .pipe (gulp.dest (' dist/js/'))}) / / compress imggulp.task ('img', function () {return gulp.src (' public/img/**/*') / / introduce all Img .pipe (imagemin ({optimizationLevel: 3, progressive: true, interlaced: pipe})) / / compress pictures / / if you want to compress the changed files Use the following code / / .pipe (cache (imagemin ({optimizationLevel: 3, progressive: true, interlaced: true})) .pipe (gulp.dest ('dist/img/')) / / .pipe (notify ({message:' picture processing complete'}) }); / / browser synchronization Use port 7000 to proxy port 3008 gulp.task of Express ('browser-sync', [' nodemon'], function () {browserSync.init (null, {proxy: "http://localhost:3008", files: [" dist/views/*.* "," dist/css/*.* "," dist/js/*.* "," dist/img/*.* "], browser:" google chrome ", port: 7000}) }); / / enable the Express service gulp.task ('nodemon', function (cb) {var started = false; return nodemon ({script:' bin/www'}). On ('start', function () {/ / to avoid nodemon being started multiple times / / thanks @ matthisk if (! started) {cb (); started = true;}});}) Gulp.task ('build', [' clean','less','ejs','js','img'], function () {}); gulp.task ('default', [' browser-sync'], function () {/ / put your default task code here / / listen on all css documents gulp.watch ('public/less/*.less', [' less']) / / listen to all .js files gulp.watch ('public/js/*.js', [' js']); / / listen to all picture files gulp.watch ('public/img/**/*', [' img']); / / listen to ejs gulp.watch ('views/**/*.ejs', [' ejs']) / / create a real-time adjustment server-var server = livereload () is not used in the project; / / listen to all documents in the dist/ directory and force the browser to refresh when there is an update (requires the cooperation of the browser plug-in or add the JS listening code to the page as described above) gulp.watch (['public/dist/**']) .on (' change', function (file) {server.changed (file.path)) });}); app.js file var express = require ('express'); var path = require (' path'); var favicon = require ('serve-favicon'); var logger = require (' morgan'); var cookieParser = require ('cookie-parser'); var bodyParser = require (' body-parser'); var routes = require ('. / routes/index'); var users = require ('. / routes/users'); var app = express () / / view engine setupapp.set ('views', path.join (_ _ dirname,' dist/views')); app.set ('view engine',' ejs'); / / uncomment after placing your favicon in / public//app.use (favicon (path.join (_ _ dirname, 'public',' favicon.ico')); app.use (logger ('dev')); app.use (bodyParser.json ()); app.use (bodyParser.urlencoded ({extended: false})) App.use (cookieParser ()); app.use (express.static (path.join (_ dirname, 'dist')); app.use (' /', routes); app.use ('/ users', users); / / catch 404 and forward to error handlerapp.use (function (req, res, next) {var err = new Error ('Not Found'); err.status = 404; next (err);}) / / error handlers// development error handler// will print stacktraceif (app.get ('env') = =' development') {app.use (function (err, req, res, next) {res.status (err.status | | 500); res.render ('error', {message: err.message, error: err});}) } / / production error handler// no stacktraces leaked to userapp.use (function (err, req, res, next) {res.status (err.status | | 500); res.render ('error', {message: err.message, error: {}});}); module.exports = app
Then perform the installation in the root directory first:
Npm install, when in use, first run gulp build to compress, package and compile the file, and then execute gulp to start the automatic update server.
These are all the contents of the article "how to use Express+Less+Gulp to configure an efficient development environment". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
