基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境

时间：2022-09-20 03:34:41

基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境

Express 是比较经典的，也是最常用的 Nodejs Web框架。

一、Express 快速构建一个web应用程序或架

1、首先用全局安装 express-generator!

npm install express-generator -g

2、生成项目

express express-gulp

3、执行

运行项目之前，先安装依赖包。在项目根目录下运行：

npm install

安装完成之后，启动服务器：

npm start

4、打开浏览器浏览 http://localhost:3000/ !

基本的应用框架搭好了，但是每次文件修改后，必须在浏览器中刷新（F5），才能看到最新修改后的效果，每次这样的操作，是不是很繁琐呢？如何无刷新监控文件变化呢？这个时候自动化构建工具 grunt、gulp 就派上用场了！这里只讨论 gulp ！

二、加入 Gulp 自动化

1、安装 gulp，进入项目目录，执行命令：(Ps：gulp 首先需全局安装一次)

npm install gulp --save-dev

2、安装所需的 gulp 插件

npm install gulp-uglify --save-dev             // js压缩插件

npm install gulp-autoprefixer --save-dev       // css3文件前缀

npm install gulp-nodemon --save-dev            // 项目自动重启

npm install gulp-rename --save-dev             // 重命名

npm install del --save-dev                     // 文件删除模块

npm install node-sass --save-dev               // gulp-sass 依赖于此

npm install gulp-sass --save-dev               // 构建编译sass

npm install gulp-sourcemaps -save-dev          // sassmaps，生成的css文件下面会加上这个

这里需要注意，在安装 gulp-sass 的时候，需要先安装 node-sass，并且在安装的时候，有可能会安装失败，这个时候，可以用 cnpm 试一下

cnpm node-sass gulp-sass --save-dev

3、安装 browser-sync

npm install browser-sync --save-dev

browser-sync 是重头戏，可以监控文件的变化实现自动刷新，具体的API用法可以参考官方文档！

4、配置gulpfile.js

var gulp = require('gulp');

var browserSync = require('browser-sync');

var reload = browserSync.reload;

var sass = require('gulp-sass');

var prefix = require('gulp-autoprefixer');

var nodemon = require('gulp-nodemon');

var sourcemaps = require('gulp-sourcemaps');

var jade = require('gulp-jade');

var rename = require('gulp-rename');

var del = require('del');

var uglify = require('gulp-uglify');

// dev task start DONE can not compile the sass or less file

gulp.task('sass', function() {

    return gulp

        .src(['./sass/*.scss'])

        .pipe(sourcemaps.init())

        .pipe(sass({

            errLogToConsole: true,

            outputStyle: 'compact'

        }).on('error', sass.logError))

        .pipe(prefix('last 2 versions', '> 1%', 'ie8', 'Android 2'))

        .pipe(sourcemaps.write())

        .pipe(rename({                      // Renames the merged CSS file

            basename: 'style',              // The file name

            extname: '.css'                 // The file extension

        }))

        .pipe(gulp.dest('./public/stylesheets/'))

        .pipe(reload({

            stream: true

        }));

});

gulp.task('sass-watch', ['sass'], browserSync.reload);

gulp.task('browser-sync', ['nodemon', 'sass'], function() {

    browserSync.init(null, {

        proxy: 'http://localhost:3000',

        files: [

            'public/**/*.*', 'views/**/*.*', 'routes/*.*', 'sass/*.*'

        ],

        browser: 'chrome',

        notify: false,

        port: 5000

    });

    gulp.watch('sass/*.scss', ['sass-watch']);

});

gulp.task('js', function() {

    return gulp.src(['routes/*.js'])

        .pipe(uglify())

        .pipe(gulp.dest('dist/js'));

});

gulp.task('nodemon', function(cb) {

    var called = false;

    return nodemon({

        script: 'bin/www'

    }).on('start', function() {

        if (!called) {

            cb();

            called = true;

        }

    });

});

gulp.task('clean', function(cb) {

    del(['./dist'], cb)

});

//build task start DONE add build task

gulp.task('jade', function() {

    return gulp

        .src(['views/**/*.jade', '!views/layout/**/*.jade', '!views/includes/**/*.jade'])

        .pipe(jade({

            pretty: true

        }))

        .pipe(gulp.dest('./dist/views'));

});

gulp.task('dist', ['jade', 'js']);

gulp.task('default', ['browser-sync']);

5、运行

gulp

运行完命令，会自动打开浏览器，大功告成！

Ps：以上的 gulp 插件，可以根据自己需求自己配置！

Github：https://github.com/jonechen1127/Express-Gulp

相关文章