通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境。 下面将逐步构建一个可以自动编译 sass 文件、压缩 javascript 文件、多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作。

相关连接导航

在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

一、创建目录结构

建立如下目录结构,learn-gulp 作为我们的项目根目录。

learn-gulp/
├── app/
│ ├── sass/
│ │ └─ main.scss
│ ├── scripts/
│ │ └─ javascript.js
│ └── index.html
├── dist/
└── release/

app 为工作目录,所有操作都在该目录下进行。gulp 检测到文件变动会自动对文件进行处理并分发至 dist 目录。

dist 目标文件目录,这里是编译、压缩过的文件。

release 可以发布至服务器的文件。

二、初始化npm软件包信息

在 learn-gulp 目录下执行 npm init。这一步主要是创建一个 package.json 文件,便于与开发团队其他成员分享当前环境信息。

运行 npm init 会要求输入项目名称、版本号、描述、入口程序名称、关键字、作者、license 等信息,根据实际情况输入即可。下面是我输入相关信息后生成的 package.json 文件,供参考:

{
"name": "fedis",
"version": "1.0.4",
"description": "fedis - Front-End development integration solution",
"main": "index.js",
"keywords": [
"gulp",
"sass",
"browser-sync",
"style",
"html"
],
"author": "kelsen",
"license": "MIT",
"bugs": {
"url": ""
},
"homepage": "",
"repository": {
"type": "git",
"url": "https://github.com/"
}
}

注意:部分选项可以不填写,如 git 仓库选项。

三、安装 npm 软件包

通过命令 npm install package-name 安装 npm 软件包,建议带上  --save 参数,这样就会把你安装的软件都记录在 dependencies 字段下,便于分享你的开发环境给其他人。关于 install 以及 --save 参数的相关信息请参考 NPM 入门 - 基础使用 。

下面列出了要安装的软件包

"dependencies": {
"browser-sync": "2.10.0",
"browsersync-ssi": "0.2.4",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-minify": "0.0.5","gulp-plumber": "^1.0.1","gulp-sass": "2.1.0",
"gulp-zip": "^3.0.2"
}

这些软件包的基本介绍请参考 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三) 。

四、构建 gulp 任务

安装完所有软件包后,在项目目录 learn-gulp 中新建一个javascript文件,命名为 gulpfile.js ,在该文件中定义任务。如果要了解更详细的有关 任务 的信息,请参考 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

1、加载 gulp 插件。

'use strict';

var gulp        = require('gulp'),
browserSync = require('browser-sync').create(),
SSI = require('browsersync-ssi'),
concat = require('gulp-concat'),
minify = require('gulp-minify'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
zip = require('gulp-zip');

这里注意,第一行的 'use strict';

2、构建一个处理静态文件的 server ,并监听工作目录,当工作目录有文件变化时立即进行相关操作并执行 browserSync.reload 重新加载页面。

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

    browserSync.init({
server: {
baseDir:["./dist"],
middleware:SSI({
baseDir:'./dist',
ext:'.shtml',
version:'2.10.0'
})
}
}); gulp.watch("app/scss/**/*.scss", ['sass']);
gulp.watch("app/scripts/**/*.js", ['js']);
gulp.watch("app/**/*.html", ['html']);
gulp.watch("dist/**/*.html").on("change",browserSync.reload);
});

如有疑问可参考官网文档:browsersync.io

3、编译 sass 文件、并自动注入到浏览器

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() { return gulp.src("app/scss/**/*.scss")
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle:"compact"}))
.pipe(gulp.dest("dist/styles"))
.pipe(browserSync.stream());
});

这里需要注意 app/scss/**/*.scss ,是 app/scss/ 目录下所有SCSS文件的意思。

4、压缩 javascript 文件

// javscript files operate
gulp.task('js', function(){
return gulp.src('app/scripts/**/*.js')
.pipe(plumber())
.pipe(minify())
.pipe(gulp.dest("dist/scripts"))
.pipe(browserSync.stream());
});

对 learn-gulp/app/scripts/ 下的所有 javascript 文件进行压缩处理并分发至 learn-gulp/dist/scripts/ 目录下,每个文件都会对应的生成相应的压缩文件, 如 file.js & file.min.js

5、处理 html 文件

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

    return gulp.src("app/*.html")
.pipe(plumber())
.pipe(gulp.dest("dist/"))
.pipe(browserSync.stream());
});

这里并未对 html 文件做任何改动,你可以根据实际情况进行一些操作。

6、打包发布目标文件

// publish
gulp.task('publish', function(){
return gulp.src('dist/**/*')
.pipe(plumber())
.pipe(zip('publish.zip'))
.pipe(gulp.dest('release'))
});

该任务负责把 learn-gulp/dist 目录下的文件打包成一个 zip 文件并分发至 learn-gulp/release 目录下。

运行命令  $ gulp publish  可执行该任务。

7、编辑默认任务

gulp.task('default', ['html','serve']);

default 任务是运行 gulp 时执行的第一个任务。我们通过 default 任务来执行 serve 任务。

五、开始工作

1、运行 gulp 命令,如果没有异常 gulp 就已经开始工作了,浏览器会自动打开。

2、打开 learn-gulp/app/scss/main.scss 输入如下内容

.fedis-main
{
background-image: linear-gradient(135deg, #573e81, #133259 40%, #133259);
color: #FFF;
padding: 80px;
h1{font-size: 6em; font-family: Arial, Helvetica, sans-serif; text-align: center;font-weight:; }
}
.footer{color:#888 }

当按下 Ctrl+S 保存时,sass 任务会自动执行,执行完成后 learn-gulp/dist/styles/ 目录下会生成css文件 main.css

3、打开编辑器在 learn-gulp/app/index.html 文件中输入下面内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Welcome - Fedis</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="container" id="main">
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center fedis-main">
<h1>Fedis</h1>
<p>Front-End development integration solution</p>
<small>
<a class="btn btn-success" href="http://shang.qq.com/wpa/qunwpa?idkey=1aab8e1fc1e992b7390185551e84701163bb9dbdc32a769b185d9f8fd6e70262" target="_blank"><i class="fa fa-qq"></i>加入Q 群<br>221702761</a>
</small>
</div>
<hr>
<div class="footer text-center">
<small>Fedis 1.0.0 · Created by Kelsen</small>
</div>
</div>
</div>
</div> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="scripts/javascript.js"></script>
</body>
</html>

此时按下 Ctrl+S 后 learn-gulp/dist/ 下相应位置的 index.html 文件将被新版本替换,紧接着浏览器会自动显示最新效果。

写在最后

如果您有任何建议或疑问请在下面留言交流。

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)的更多相关文章

  1. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  2. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  3. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  4. 研究实验1_搭建一个精简的C语言开发环境(包含部分经典的前言)

    综合研究:      在这部分内容中,将启示我们如何进行独立研究和深度思考(一定要注意这一点,相应的调整自己的学习思想).同时使我们:          (1)认识到汇编语言对于深入理解其他领域知识的 ...

  5. 通过搭建一个精简的C语言开发环境了解一个C程序的执行过程

    一.如何搭建一个精简的C语言开发环境 准备:下载TC2.0,并解压,比如说“d:\tc2.0\tc”目录 1.在C盘建立一个目录minic c:\ md minic 2.从解压的目录中将以下文件拷贝到 ...

  6. 基于gulp的前端自动化开发构建新

    关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新, ...

  7. web自动化开发环境配置详解

    1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本 2.安装 grunt-C ...

  8. 使用Eclipse+Maven+Jetty构建Java Web开发环境(几个教程综合集成2014发行)

    工作需要使用Jetty由于web集装箱,得知Eclipse+Maven+Jetty该组合是非常好的,因此,要在网上找了很多教程,但不写或多或少特定的或过时的内容而导致最终的配置失败,易于配置为未来的同 ...

  9. 搭建一个舒适的 .NET Core 开发环境

    最近,一直在往.Net Core上迁移,随着工作的深入,发现.Net Core比.Net Framework好玩多了.不过目前还在windows下开发,虽然VisualStudio是宇宙第一神器,但是 ...

随机推荐

  1. Hadoop 中利用 mapreduce 读写 mysql 数据

    Hadoop 中利用 mapreduce 读写 mysql 数据   有时候我们在项目中会遇到输入结果集很大,但是输出结果很小,比如一些 pv.uv 数据,然后为了实时查询的需求,或者一些 OLAP ...

  2. SQL Server表分区

    什么是表分区 一般情况下,我们建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数据就会按照你指定的规则分放到不同的文件里,把一个大的数据文件拆分为多个小文件,还可以把这些小文件放在 ...

  3. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  4. rnandroid环境搭建

    react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...

  5. spark处理大规模语料库统计词汇

    最近迷上了spark,写一个专门处理语料库生成词库的项目拿来练练手, github地址:https://github.com/LiuRoy/spark_splitter.代码实现参考wordmaker ...

  6. MJRefresh 源码解读 + 使用

    MJRefresh这个刷新控件是一款非常好用的框架,我们在使用一个框架的同时,最好能了解下它的实现原理,不管是根据业务要求在原有的基础上修改代码,还是其他的目的,弄明白作者的思路和代码风格,会受益匪浅 ...

  7. MongoDB系列(一):简介及安装

    什么是MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为应用提供可扩展的高 ...

  8. PHP设计模式(一)简单工厂模式 (Simple Factory For PHP)

    最近天气变化无常,身为程序猿的寡人!~终究难耐天气的挑战,病倒了,果然,程序猿还需多保养自己的身体,有句话这么说:一生只有两件事能报复你:不够努力的辜负和过度消耗身体的后患.话不多说,开始吧. 一.什 ...

  9. arcgis api for js入门开发系列八聚合效果(含源代码)

    上一篇实现了demo的图层控制模块,本篇新增聚合效果,截图如下(源代码见文章底部): 聚合效果实现的思路如下: 1.map.html引用聚合包,项目已经包含进来了的聚合文件夹: <script ...

  10. Android 死锁和重入锁

    死锁的定义: 1.一般的死锁 一般的死锁是指多个线程的执行必须同时拥有多个资源,由于不同的线程需要的资源被不同的线程占用,最终导致僵持的状态,这就是一般死锁的定义. package com.cxt.t ...