首页手记我来告诉你小白如何使用gulp

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

标签：

JavaScript 前端工具 Sass/Less

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"]);
});

在终端输入