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

通过前面几节的准备工作,对于 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": "https://github.com/Leonkao/fedis/issues"
  },
  "homepage": "https://github.com/Leonkao/fedis#readme",
  "repository": {
    "type": "git",
    "url": "https://github.com/Leonkao/fedis"
  }
}

注意:部分选项可以不填写,如 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: 100; }
}
.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 文件将被新版本替换,紧接着浏览器会自动显示最新效果。如果一切正常将会在网页中看到如下界面:

写在最后

文中示例项目 fedis 的源码可以通过下面两种方式获取

1、GitHub(推荐) https://github.com/leonkao/fedis

$ git clone https://github.com/Leonkao/fedis.git

2、npmjs   https://www.npmjs.com/~kelsen

$ npm install fedis

本系列文章到这里就结束了,如果您有任何建议或疑问请在下面留言交流,也可通过 Web前端高级工程师 群进行线上沟通。

时间: 11-24

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

构建一个前端自动化开发环境

一:NPM 一:NPM(node package manager) npm是node的包管理工具,主要对node包进行安装.更新.卸载.查看.搜索.发布等. 二:NPM安装 有两种安装,一种本地安装,package下载到当前目录,只有当前目录可使用  npm install grunt-cli 另一种全局安装,package下载到系统指定目录下,能够在所有目录下使用     npm install -g grunt-cli 安装成功后,会多出一个node_modules目录,grunt-cli就

前端自动化开发工作流

1. 前端自动化工作流简介 每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程.一个工作流的过程不是一开始就固定的,而是随着项目的深入而不断地改进,期间甚至会形成一些工具.例如当年大神们在Linux写C语言,觉得每次编译好多文件好麻烦,就发明了makefile.不同代码的管理好麻烦,然后就发明了git.SVN等等. 一个工作流程的好坏会影响你开发的效率.开发的流程程度,然后间接影响心情,打击编码积极性.所以我

搭建前端的开发环境和前端开发流程总结

一.搭建前端的开发环境 1.代码编辑工具:sublime/WebStorm/HBuilder. 2.断点调试工具:Firebug. 3.版本管理工具:Git(本人建议使用git,至于原因大家可以看看相关blog),安装完成后我们就可以从github上clone一些项目. 4.代码合并和混淆工具:webpack (Webpack具有Grunt.Gulp对于静态资源自动化构建的能力,同时兼容AMD与CMD的模块加载规范). 4.开发调试工具:NodeJs.很多非常有用的工具都是基于NodeJs的,我

用 Ubuntu 12.04 搭建一个 Ruby on Rails 本地开发环境

转载,原文链接 http://linux.cn/portal.php?mod=view&aid=170 用 Ubuntu 搭建一个 Ruby on Rails 本地开发环境 想要开发 Ruby on Rails 应用吗?虽然已经有一些(初级的)Ruby on Rails 教程了,但是似乎在如何搭建一个简洁而更新的本地开发环境方面还有些不甚确定的地方. 这个教程将引导你通过几个步骤来搭建一个基于 Ubuntu 的 Ruby on Rails 本地开发环境.而这个教程的即将发布的第二部分,将帮助你搭

基于gulp的前端框架开发规范

前端开发及相关规范 - 基于gulp的前端框架开发规范 1.前端开发工具的安装和使用说明 前端开发工具的目录结构 htmlcodeBuilder - v0.9 ├── statics ├── html //静态文件开发 ├── js // 非require引入的js文件 ├── Lib // 第三方JS包 ├── ve_2_1 // ├── css // 样式目录 ├── fonts // bootstrap的图标字体 ├── img // 图片目录 ├── less // less源码 ├──

开发环境——基于RHEL 6.8开发环境的搭建

开发环境--基于RHEL 6.8开发环境的搭建 本文讲述了基于RHEL 6.8操作系统搭建开发环境,主要安装了GCC 4.9.3.Qt 5.7.Apache 2.4.25.MySQL 5.6.35.本文同时适用于在Linux主机无互联网环境下搭建开发环境,只需要将所需安装包下载后拷贝到Linux主机即可. 一.RHEL6.8安装 1.RHEL 6.8下载 下载RHEL 6.8安装包:rhel-server-6.8-x86_64-dvd.iso 2.RHEL 6.8安装 安装过程中选择Develo

集成开发环境,关闭Debug模式,解决方案

通过Myeclipse8.6开发Web项目时,在浏览器中输入URL之后,Myeclipse弹出debug界面,为了不弹出这个界面,解决方案为: 方案一: window->preferences->Myeclipse->Servers->Tomcat然后找到你的相应的Tomcat服务器的版本,选中然后展开其下面的子菜单会发现有个Launch选项,选中,在右侧Tomcat launch mode 中,选择Run mode 然后Apply ,最后点击OK,就行了. 方案二:去除所有的断点

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

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html Gulp 概述 Gulp 是一个构建工具,通过自动化处理

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

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G