首页 > 开发 > 前端 > 正文

我来告诉你小白如何使用gulp

2017-07-01 22:22:17  来源:慕课网

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务:

搭建web服务器

文件保存时自动重载浏览器

使用预处理器如Sass、LESS

优化资源,比如压缩CSS、JavaScript、压缩图片

本文主要告知如何使用gulp编译sass和es6

安装node

传送门

2.全局安装gulp

打开终端,我使用的是Windows,以Windows为例, 打开cmd,输入以下命令

npm install gulp -g

(推荐使用全局安装国内镜像,从而减少下载时间)

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.进入指定目录(使用cd命令),并创建gulp项目

cnpm init

局部安装gulp

(注意:以下命令中的所有save前为两横杠,且连在一起,没有空格)

cnpm install gulp - -save-dev

4.在gulp项目目录下创建gulpfile.js文件 5.安装gulp-sass插件和gulp-plumber插件

gulp-sass: 用于编译sass

gulp-plumer: 用于阻止gulp插件发生错误导致进程退出并输出错误日志。

cnpm install gulp-sass - - save-dev

6.编辑gulpfile.js文件,创建并监听sass编译任务
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");

// 监听sass
// gulp.src()    为源文件路径
// gulp.dest()    为输出文件名路径
// {outputStyle: "expanded"} 指定sass编译格式
gulp.task("sass", function() {
    return gulp.src("scss/*.scss")
                .pipe(plumber())
                .pipe(sass({outputStyle: "expanded"}).on('error', sass.logError))
                .pipe(gulp.dest("css"));
});

gulp.task("watch-sass", function() {
    gulp.watch("scss/*.scss", ["sass"]);
});

在终端输入

gulp watch-sass

安装gulp-babel插件和babel-preset-es2015插件

cnpm install --save-dev gulp-babel babel-preset-es2015

8.编辑gulpfile.js文件,创建并监听es6编译任务
var gulp = require("gulp");
var babel = require("gulp-babel");

// 创建es6任务
gulp.task("es6", function() {
    return gulp.src("es6/*.js")
                .pipe(plumber())
                .pipe(babel({
                    presets: ["es2015"]
                }))
                .pipe(gulp.dest("dist"));
});
// 监听es6任务
gulp.task("watch-es6", function() {
    gulp.watch("es6/*.js", ["es6"]);
});

在终端输入

gulp watch-es6