文档章节

node 使用 gulp 创建本地服务

Jack088
 Jack088
发布于 2015/03/18 08:08
字数 475
阅读 265
收藏 3

打开终端全局安装 gulp 模块

npm install -g gulp    //全局安装 gulp(轻量级自动化项目构建工具

 cd  进入到项目文件夹,可以到看到 package.json 配置文件:

{  "name": "ionic-project",  "version": "1.0.0",  "description": "An Ionic project",  "dependencies": {    "gulp": "^3.5.6",    "gulp-sass": "^0.7.1",      // sass支持  
   "gulp-concat": "^2.2.0",    // 合并文件
   "gulp-minify-css": "^0.3.0", // 压缩css
   "gulp-rename": "^1.2.0"    // 文件重命名
 }
}

首先 cd 到自己的项目目录

执行命令:npm install    // 通过npm安装依赖,gulp的一些plugins就搞定了。 

如果配置的 web 服务器需要自动刷新,可以在上面加上 "gulp-connect" 插件,或者直接执行命令安装:npm install gulp-connect. 

配置 gulpfile.js 

这是gulp的配置文件,我们现在只要对它进行一下配置就可以运行项目了,代码如下,已经加入注释:

// 引入gulp
var gulp = require('gulp');

// 引入gulp-plugins
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

// 定义sass文件路径var paths = {
 sass: ['./scss/**/*.scss']
};

/*
 创建sass任务,它会监听./scss/ionic.app.scss里面的文件变化,然后编译为css到./www/css/目录.
 然后进行css压缩,将压缩后的文件重命名为min.css结尾,然后还是放到./www/css/目录下。  
*/

gulp.task('sass', function(done) {
 gulp.src('./scss/ionic.app.scss')
   .pipe(sass())
   .pipe(gulp.dest('./www/css/'))
   .pipe(minifyCss({
     keepSpecialComments: 0
   }))
   .pipe(rename({ extname: '.min.css' }))
   .pipe(gulp.dest('./www/css/'))
   .on('end', done);
});

//watch任务,监听文件变化gulp.task('watch', function() {
 gulp.watch(paths.sass, ['sass']);
 gulp.watch(['./www/*.html'], ['html']);
});

// connect任务,监听项目变化后自动刷新项目

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

   connect.server({

       port: 3000,

       root:'www',

       livereload: true

   });

});



gulp.task('html', function () {
 gulp.src('./www/*.html')
   .pipe(connect.reload());
});

// default默认任务,从此开始执行
gulp.task('default', ['connect','sass','watch']);


/**

 * Created by Jack on 15/10/25.

 */

var gulp = require('gulp');

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


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

   gulp.watch(['./www/*.html'], ['html']);

});

安装完成后即可用 gulp 命令来建立本地服务

最后在浏览器中输入 localhost:3000 (默认是 8080)即可访问

© 著作权归作者所有

Jack088
粉丝 44
博文 514
码字总数 76218
作品 0
扬州
程序员
私信 提问
gulp命令找不到 – 安装gulp后出错

gulp命令找不到 – 安装gulp后出错 事实证明挺有用的:我的问题是安装了gulp命令找不到,添加了环境变量还是不行,在下找不到gulp.cmd文件,最后看到这篇文章,尝试下安装gulp-cli包,然后再...

飛飛飛jjs
2017/06/10
0
0
Nodejs 库路径

Gulp.js介绍 Gulp是一个构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript里。前端开...

雨中人X
2015/12/08
40
0
gulp基础教程

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件...

sgosky
2017/03/20
0
0
使用gulp构建前端(一)

使用gulp构建前端(一) 前端页面越来越多的时候,如何管理其实也是一个非常重要的东西,less文件编译成css文件不一定要借助编译软件,在打包的时候如何对css文件/js文件,进行压缩。其实满足...

年少爱追梦
2016/07/07
94
0
Gulp入门与解惑

Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目。 安装Gulp 1、全局安装...

雲霏霏
2017/03/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
15
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
10
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
14
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部