基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境
基于 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 搭建一套高性能的前端开发环境的更多相关文章
- 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 基于gulp编写的一个简单实用的前端开发环境
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发者.假设你如今还不知道grunt或者听说过. ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境-完整教程
原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境
用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...
- Grunt搭建自动化web前端开发环境--完整流程
Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...
随机推荐
- UVALive - 6887 Book Club 有向环的路径覆盖
题目链接: http://acm.hust.edu.cn/vjudge/problem/129727 D - Book Club Time Limit: 5000MS 题意 给你一个无自环的有向图,问 ...
- 《IT小小鸟》读后感
我是来自大一的小小鸟,想要飞却没有一对坚硬的臂膀! 看了<IT小小鸟>了解了学长和学姐们的大学经历后开始让我反思我的大学生活.学长和学姐们通过自身的经历来告诉我们,应该怎么样规划好大学生涯 ...
- J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别(转载)
转载地址:http://blog.csdn.net/alspwx/article/details/20799017 一.J2EE.J2SE.J2ME区别 J2EE——全称Java 2 Enterpri ...
- 在本地数据库目录或系统数据库目录中已经存在数据库别名""的解决办法
在创建数据库时遇到数据库别名已存在的问题时,可以: 1. 首先用 db2 list database directory 命令看在系统数据库目录(System Database Directory)中 ...
- 【week11】psp
本周psp 项目 内容 开始时间 结束时间 被打断 净时间 11.26(星期六) 看论文 psiBlast 9:00 12:00 5 175 11.28(星期一) 做作业 设计模式作业 ...
- C# SqlCommand和SqlDataAdapter的区别
SqlCommand和SqlDataAdapter的区别 SqlCommand对应DateReader SqlDataAdapter对应DataSet SqlCommand的执行效率比较高,但 ...
- 第100天:CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
- python的N个小功能(连接数据库并下载相应位置的图片)
#################################################################################################### ...
- CF487E-Tourists
题意 给出一个\(n\)个点\(m\)条边的无向图,给出每个点的初始点权,\(q\)次操作: 修改一个点的点权 询问两点间的所有路径中最小点权最小的路径上的最小点权 \(n,m,q\le 10^5,w ...
- 【BZOJ4828】【HNOI2017】大佬(动态规划)
[BZOJ4828][HNOI2017]大佬(动态规划) 题面 BZOJ 洛谷 LOJ 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场 就能让周围 ...