基于 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

基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境的更多相关文章

  1. 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  2. 基于gulp编写的一个简单实用的前端开发环境

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  3. 【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发者.假设你如今还不知道grunt或者听说过. ...

  4. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  5. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  6. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  7. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  8. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

  9. Grunt搭建自动化web前端开发环境--完整流程

    Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...

随机推荐

  1. UVALive - 6887 Book Club 有向环的路径覆盖

    题目链接: http://acm.hust.edu.cn/vjudge/problem/129727 D - Book Club Time Limit: 5000MS 题意 给你一个无自环的有向图,问 ...

  2. 《IT小小鸟》读后感

    我是来自大一的小小鸟,想要飞却没有一对坚硬的臂膀! 看了<IT小小鸟>了解了学长和学姐们的大学经历后开始让我反思我的大学生活.学长和学姐们通过自身的经历来告诉我们,应该怎么样规划好大学生涯 ...

  3. J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别(转载)

    转载地址:http://blog.csdn.net/alspwx/article/details/20799017 一.J2EE.J2SE.J2ME区别 J2EE——全称Java 2 Enterpri ...

  4. 在本地数据库目录或系统数据库目录中已经存在数据库别名""的解决办法

    在创建数据库时遇到数据库别名已存在的问题时,可以: 1. 首先用 db2 list database directory 命令看在系统数据库目录(System Database Directory)中 ...

  5. 【week11】psp

    本周psp 项目 内容 开始时间 结束时间 被打断 净时间 11.26(星期六)  看论文 psiBlast  9:00 12:00  5  175    11.28(星期一)  做作业 设计模式作业 ...

  6. C# SqlCommand和SqlDataAdapter的区别

    SqlCommand和SqlDataAdapter的区别 SqlCommand对应DateReader   SqlDataAdapter对应DataSet   SqlCommand的执行效率比较高,但 ...

  7. 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  8. python的N个小功能(连接数据库并下载相应位置的图片)

    #################################################################################################### ...

  9. CF487E-Tourists

    题意 给出一个\(n\)个点\(m\)条边的无向图,给出每个点的初始点权,\(q\)次操作: 修改一个点的点权 询问两点间的所有路径中最小点权最小的路径上的最小点权 \(n,m,q\le 10^5,w ...

  10. 【BZOJ4828】【HNOI2017】大佬(动态规划)

    [BZOJ4828][HNOI2017]大佬(动态规划) 题面 BZOJ 洛谷 LOJ 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场 就能让周围 ...