使用 gulp
搭建前端环境入门篇
1. gulp 入门基础
2. 配置常用插件
3. ES6 代码转化
4. 完整演示示例
5. 参考文档
gulp 入门基础
1.全局安装 gulp
:
$ npm install --global gulp
2.作为项目的开发依赖 (devDependencies)
$ npm install --save-dev gulp
3.在项目根目录下面创建一个名为 gulpfile.js
的文件:
$ touch gulpfile.js
// 配置 gulp 的相关任务
4.运行 gulp:
$ gulp
配置常用插件
下面的步骤从零开始动手搭建环境
1.检查你的 node 版本和 gulp 版本
node -v
// => v4.0.0
gulp -v
// => CLI version 3.9.0
// => Local version 3.9.0
2.安装常用插件
初始化项目目录
$ mkdir ES6-with-gulp-babe && cd ES6-with-gulp-babe && git init && npm init
注: 使用 npm init 创建一个 package.json 存储依赖关系等配置信息
安装依赖插件
$ npm install --save-dev gulp gulp-sass gulp-autoprefixer browser-sync gulp-notify
上述命名依次安装了 gulp
、gulp-sass
、gulp-autoprefixer
、browser-sync
、gulp-notify
等常用插件,其中:
gulp-sass
用于将 Sass 文件编译为 CSS 文件gulp-autoprefixer
根据浏览器版本自动处理添加浏览器前缀browser-sync
能让浏览器实时、快速响应文件更改(html、js、css、sass、less等)并自动刷新页面gulp-notify
用于任务提醒
3.创建 gulp
的配置文件 gulpfile.js
以 browser-sync
为例来配置 gulpfile.js
文件
// 加载插件
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// 静态服务器 + 监听 scss/html 文件
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload;);
});
4. Browsersync可以同时在PC、平板、手机等设备下进项调试
ES6 代码转化
使用 ES6
的语法重写 gulpfile.js
, 在最新的 gulp 3.9
版本上,开发者可以使用 ES6
语法来编写配置文件,但是需要安装 babel
来转化 ES6
代码
第一步:安装 babel
npm install babel-core babel-preset-es2015 --save-dev
第二步:在根目录下创建 .babelrc
配置文件
touch .babelrc
并添加以下内容:
{
"presets": ["es2015"]
}
注:.babelrc
为 babel
的配置文件,保存在项目的根目录下,其中presets用于设置开启的语法特性集合,详细介绍可参考官方文档:https://babeljs.io/docs/usage/babelrc/ 和 http://babeljs.io/docs/plugins/#presets
第三步:将 gulpfile.js
重名为 gulpfile.babel.js
mv "gulpfile.js" "gulpfile.babel.js"
第四步:现在我们就可以使用ES6的语法重写 gulp
的配置文件
'use strict';
import babel from 'gulp-babel';
gulp.task('babel',() => {
gulp.src('src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'))
.pipe(notify({ message: 'babel task complete' }));
})
完整演示示例
1.安装
Clone the repo
npm install -g gulp
to install Gulp globally.npm install
to resolve project dependencies.
2.使用
Run
gulp
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。