初识Gulp
2017-07-29 本文已影响0人
MOKUO
Gulp简介
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目
使用方法
- 安装命令行工具
npm install -g gulp-cli - 安装本体
npm install --save-dev gulp
注：至于为什么不直接全局安装，那是因为全局安装并不能直接在命令行使用，官方这么做的原因是为了版本和依赖的控制，如果所有项目都使用全局的同一个版本，有时候会带来不必要的麻烦
- 在项目根目录下创建一个名为 gulpfile.js 的文件：
const gulp = require('gulp');
gulp.task('任务名称', () => {
// 将你的任务代码放在这，若任务名称为default，则为默认任务
//在使用命令行时可直接使用：gulp，若有自定义名称时，则使用：gulp 自定义名称
});
Gulp插件
gulp插件可以实现前端一些功能的自动化，比如sass转换css，babel编译ES6为ES5代码等。不同的插件有不同的功能，并且利用gulp的流式处理，我们可以轻松完成类似流水线一般的处理操作。
流式处理形式的任务代码如下：
gulp.src('源文件地址')
.pipe(处理1)
.pipe(处理2)
.pipe(gulp.dest('输出地址'));
常用插件
1. gulp-ruby-sass
此插件需要本机已标准安装sass
使用方法
const gulp = require('gulp');
const sass = require('gulp-ruby-sass');
gulp.task('sass', () =>
sass('source/file.scss')
.on('error', sass.logError)
.pipe(gulp.dest('result'))
);
2. gulp-autoprefixer
此插件为css自动补充各浏览器厂商前缀，解决兼容性问题
使用方法
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
gulp.task('default', () =>
gulp.src('src/app.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist'))
);
3. gulp-purifycss
精简没有用到的的css代码
使用方法
const purify = require('gulp-purifycss');
gulp.task('css', () => {
return gulp.src('./public/app/example.css')
.pipe(purify(['./public/app/**/*.js', './public/**/*.html']))
.pipe(gulp.dest('./dist/'));
});
4. gulp-wrap
用来结合文本的公共部分和特有部分，例如：结合公共的<head>或者<footer>
使用方法
gulp.task("build", () => {
gulp.src("src/*.html")
.pipe(wrap({src:"layout/default.html"})) 在
.pipe(gulp.dest("dis/"));
});
/**
*公共部分为default.html, 在其内部需要替换内容的地方键入<%= contents %>
**/
持续更新...
