关于gulp两三事

前端自动化工具gulp，优点简单粗暴却使用，就是插件对比grunt略少。使用gulp首先要安装node环境,

　一.安装node

　　　　官网https://nodejs.org/下载安装包，按照提示下一步即可，命令行输入

　　　　　　　　npm-v即可查看是否安装成功。

　　　　npm init初始化创建一个 package.json 文件

　二.安装gulp

　　　　全局安装

　　　　 　　　　　　　　　　　　　　　　　　　　　　npm install --global gulp
　　　局部安装

 　　　　npm install --save-dev gulp
　　　当前目录创建gulpfile.js文件
三.gulp组件

　　前端项目需要的功能：
　　1、图片（压缩图片支持jpg、png、gif）
　　2、样式（支持sass 同时支持合并、压缩、重命名）
　　3、javascript （检查、合并、压缩、重命名）
　　4、html （压缩）
　　5、客户端同步刷新显示修改
　　6、构建项目前清除发布环境下的文件（保持发布环境的清洁）

通过gulp plugins，寻找对于的gulp组件
gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-livereload: 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）

安装组件只需要 npm install --save-dev +名字即可 例如npm install --save-dev gulp-sass

四.gulpfile配置

在 gulpfile.js 中通过 require 加载第三方模块/插件
通过 gulp.task() 函数可以定义任务，通过传递任务名字和一个匿名函数可以快速定义一个简单任务。
还可以通过在任务名称后再传递一个数组来定义任务列表，或当前任务执行前需执行完毕的任务。
通过 gulp.src() 可以选择文件，并将其生成为 stream 对象。
stream 可以传递给一些函数，函数会对数据进行修改，并将修改改的数据以 stream 形式返回，便于传递给下一个函数使用。
要执行 Gulp 任务，只需要在命令行输入 gulp "任务名" 即可，如果没有指定要执行的任务名，gulp 将默认执行名字为 default 的任务。

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');

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 文件将被新版本替换，紧接着浏览器会自动显示最新效果

原文地址：http://www.cnblogs.com/kelsen/p/4993169.html

秒客网

关于gulp两三事

五、开始工作

相关文章