Gulp 自动化你的前端

前端（段子）界的发展突飞猛进，总感觉随时会跟不上技术潮流（其实我已经被甩开了一条街，so sad

选择在这样一个时机发布一篇 gulp 教程并不是我的初衷，第一次用 gulp 是在一年前，而这篇帖子在草稿箱里躺了一个多月，再不发出来说不定就过时了。

当我在用 gulp 时我用它做什么？

  1. 编译 sass
  2. 合并优化压缩 css
  3. 校验压缩 js
  4. 优化图片
  5. 添加文件指纹（md5）
  6. 组件化头部底部（include html）
  7. 实时自动刷新…

总之，gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。

然而由于众所周知的原因，国内到 npm 服务器的连接很不稳定，如果你有V了个PN大可不必担心，也可通过设置 npm 代理服务器的方式访问：

“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。” —— 淘宝团队点赞

npm config set registry="https://registry.npm.taobao.org"
npm config set disturl https://npm.taobao.org/dist

接下来开始 gulp 教程：

准备工作： 安装 node.js （推荐 TLS 版），并重启系统。

1. 全局安装 gulp

npm install gulp -g

2. 目录结构：

└── src/            源码目录

├── build/   .html 组件
├── sass/     .scss .sass 文件
├── css/       .css 文件
├── js/         .js 文件
└── img/     图片

└── dist/        输出目录
└── package.json
└── gulpfile.js

3. 关于 package.json

可以在项目上使用 npm init 配置，推荐直接新建并写入初始内容：

{
  "name": "gulp-build",
  "version": "1.0.0",
  "description": "Gulp.js",
  "private": true
}

　

对于完整的 package.json (比如别人的开源项目), 只需对整个项目执行 npm install 即可安装 package.json 文件中声明的所有插件模块。

4. 给项目目录安装 gulp

npm install gulp --save-dev

　　—save-dev 这个参数会将插件信息自动更新到 package.json 里，其中的 devDependencies 属性会随插件依赖的安装卸载而改变。

PS. Windows 7及以上，按住 Shift 再右键，选择在此处打开命令窗口。免去 cd 命令定位目录的烦恼。

5. 给项目目录安装常用的插件

PS.可与上一步同时进行

npm install gulp del gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-ruby-sass gulp-rev-append gulp-cssnano gulp-replace gulp-imagemin browser-sync gulp-font-spider gulp-file-include gulp-autoprefixer --save-dev

插件将在配置文件里介绍，更多用法请参见相应的 GitHub 主页，或者直接戳这里： https://www.npmjs.com/package/

以上两个安装操作将会在项目目录下生成 node_modules 文件夹，相应的插件都在这里。

Windows 用户请注意，此文件夹可能 无法删除 无法复制 无法移动，会出现诸如“包含名称过长且无法放入回收站”，“源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置” 等等问题。使用一个简单的方式即可删除，使用 WinRAR “添加到压缩文件”，勾选压缩选项里的 “压缩后删除源文件” ，确定之后即可删除。

6. API

别看我，看它：http://www.gulpjs.com.cn/docs/api/

7. 代码示例

src/build/header.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>嘿嘿嘿</title>
<link href="css/[email protected]@hash" rel="stylesheet" type="text/css" />
<link href="css/[email protected]@hash" rel="stylesheet" type="text/css" />
<link href="css/[email protected]@hash" rel="stylesheet" type="text/css" />
</head>
<body>

src/build/footer.html

<!-- common js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/[email protected]@hash"></script>
</body>
</html>

src/index.html

@@include(‘build/header.html‘)

<div class="wrap">内容</div>

@@include(‘build/footer.html‘)

代码中， [email protected]@hash  是 gulp-rev-append 插件的指纹标识
@@include(‘build/header.html’) 可以插入 html 文件，还可以配合参数生成独立的头部。

8. 我的 gulpfile.js，配置及说明

gulpfile.js

/*!
 * gulp
 * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev
 */

// Load plugins
var gulp = require(‘gulp‘), // 必须先引入gulp插件
    del = require(‘del‘),  // 文件删除
    sass = require(‘gulp-ruby-sass‘), // sass 编译
    cached = require(‘gulp-cached‘), // 缓存当前任务中的文件，只让已修改的文件通过管道
    uglify = require(‘gulp-uglify‘), // js 压缩
    rename = require(‘gulp-rename‘), // 重命名
    concat = require(‘gulp-concat‘), // 合并文件
    notify = require(‘gulp-notify‘), // 相当于 console.log()
    filter = require(‘gulp-filter‘), // 过滤筛选指定文件
    jshint = require(‘gulp-jshint‘), // js 语法校验
    rev = require(‘gulp-rev-append‘), // 插入文件指纹（MD5）
    cssnano = require(‘gulp-cssnano‘), // CSS 压缩
    imagemin = require(‘gulp-imagemin‘), // 图片优化
    browserSync = require(‘browser-sync‘), // 保存自动刷新
    fileinclude = require(‘gulp-file-include‘), // 可以 include html 文件
    autoprefixer = require(‘gulp-autoprefixer‘); // 添加 CSS 浏览器前缀

// sass
gulp.task(‘sass‘, function() {
  return sass(‘src/sass/**/*.scss‘, {style: ‘expanded‘})  // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道并设置输出格式
    .pipe(cached(‘sass‘))  // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存）
    .pipe(autoprefixer(‘last 6 version‘)) // 添加 CSS 浏览器前缀，兼容最新的5个版本
    .pipe(gulp.dest(‘dist/css‘)) // 输出到 dist/css 目录下（不影响此时管道里的文件流）
    .pipe(rename({suffix: ‘.min‘})) // 对管道里的文件流添加 .min 的重命名
    .pipe(cssnano()) // 压缩 CSS
    .pipe(gulp.dest(‘dist/css‘)) // 输出到 dist/css 目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本
});

// css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本）
gulp.task(‘css‘, function() {
  return gulp.src(‘src/css/**/*.css‘)
    .pipe(cached(‘css‘))
    .pipe(gulp.dest(‘dist/css‘)) // 把管道里的所有文件输出到 dist/css 目录
    .pipe(filter([‘**/*‘, ‘!**/*.min.css‘])) // 筛选出管道中的非 *.min.css 文件
    .pipe(autoprefixer(‘last 6 version‘))
    .pipe(gulp.dest(‘dist/css‘)) // 把处理过的 css 输出到 dist/css 目录
    .pipe(rename({suffix: ‘.min‘}))
    .pipe(cssnano())
    .pipe(gulp.dest(‘dist/css‘))
});

// styleReload （结合 watch 任务，无刷新CSS注入）
gulp.task(‘styleReload‘, [‘sass‘, ‘css‘], function() {
  return gulp.src([‘dist/css/**/*.css‘])
    .pipe(cached(‘style‘))
    .pipe(browserSync.reload({stream: true})); // 使用无刷新 browserSync 注入 CSS
});

// script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本）
gulp.task(‘script‘, function() {
  return gulp.src([‘src/js/**/*.js‘])
    .pipe(cached(‘script‘))
    .pipe(gulp.dest(‘dist/js‘))
    .pipe(filter([‘**/*‘, ‘!**/*.min.js‘])) // 筛选出管道中的非 *.min.js 文件
    // .pipe(jshint(‘.jshintrc‘)) // js的校验与合并，根据需要开启
    // .pipe(jshint.reporter(‘default‘))
    // .pipe(concat(‘main.js‘))
    // .pipe(gulp.dest(‘dist/js‘))
    .pipe(rename({suffix: ‘.min‘}))
    .pipe(uglify())
    .pipe(gulp.dest(‘dist/js‘))
});

// image
gulp.task(‘image‘, function() {
  return gulp.src(‘src/img/**/*.{jpg,jpeg,png,gif}‘)
    .pipe(cached(‘image‘))
    .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true, multipass: true}))
    // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化
    .pipe(gulp.dest(‘dist/img‘))
});

// html 编译 html 文件并复制字体
gulp.task(‘html‘, function () {
  return gulp.src(‘src/*.html‘)
    .pipe(fileinclude()) // include html
    .pipe(rev()) // 生成并插入 MD5
    .pipe(gulp.dest(‘dist/‘))
});

// clean 清空 dist 目录
gulp.task(‘clean‘, function() {
  return del(‘dist/**/*‘);
});

// build，关连执行全部编译任务
gulp.task(‘build‘, [‘sass‘, ‘css‘, ‘script‘, ‘image‘], function () {
  gulp.start(‘html‘);
});

// default 默认任务，依赖清空任务
gulp.task(‘default‘, [‘clean‘], function() {
  gulp.start(‘build‘);
});

// watch 开启本地服务器并监听
gulp.task(‘watch‘, function() {
  browserSync.init({
    server: {
      baseDir: ‘dist‘ // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器
    }
  });

  // 监控 SASS 文件，有变动则执行CSS注入
  gulp.watch(‘src/sass/**/*.scss‘, [‘styleReload‘]);
  // 监控 CSS 文件，有变动则执行CSS注入
  gulp.watch(‘src/css/**/*.css‘, [‘styleReload‘]);
  // 监控 js 文件，有变动则执行 script 任务
  gulp.watch(‘src/js/**/*.js‘, [‘script‘]);
  // 监控图片文件，有变动则执行 image 任务
  gulp.watch(‘src/img/**/*‘, [‘image‘]);
  // 监控 html 文件，有变动则执行 html 任务
  gulp.watch(‘src/**/*.html‘, [‘html‘]);
  // 监控 dist 目录下除 css 目录以外的变动（如js，图片等），则自动刷新页面
  gulp.watch([‘dist/**/*‘, ‘!dist/css/**/*‘]).on(‘change‘, browserSync.reload);

});

9. 使用 gulp 的方法

执行gulp任务

gulp taskname // 如 gulp sass，不指定 taskname 则默认执行 default 任务

原文地址：https://www.sheyilin.com/2016/02/gulp_introduce/

原文地址：https://www.cnblogs.com/inzens/p/9047209.html

时间： 2024-11-13 09:39:32

Gulp 自动化你的前端的相关文章

使用gulp自动化打包合并前端静态资源（CSS、JS文件压缩、添加版本号）

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

前端工作流程自动化——Grunt/Gulp 自动化

前端工作流程自动化--Grunt/Gulp 自动化 Grunt/Gulp 都是node.js下的模块,简单来说是自动化任务运行器,两者都有社区及大量的插件支撑,在所有的自动化工具领域里,这两者是最好的前端自动化构建工具. 那么问题来了,Grunt和Gulp到底哪家强?在回答这个问题前,先给大家看一组下面的数据: 再看看实现同样功能的配置代码: 作者本人之前一直使用Grunt来做自动化构建的,在Gulp出来后,经过一段时间的试用感觉配置比Grunt方便多了,如果你两者还没接触过,本人推荐直接使用G

做一个合格的前端，gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇.收获知识.重在独立思考的网站),它前端js.css的压缩.合并.md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服.ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引.自定义富文本编辑器.图片上传压缩水印等等. 一.什么是gulp gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.例如:css.js的合并与压缩(减少http请求,缩小文

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

用grunt搭建自动化的web前端开发环境

用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你

用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是可以

gulp自动化任务脚本在HybridApp开发中的使用

目前做前端开发的同学可能都熟悉grunt,fis之类的自动化构建工具,其实在HybridApp开发中我们也可以使用这些工具来简化我们的工作,gulp就是一个比grunt,fis都先进的构建工具,用好gulp可以简化我们的工作流程,提升产品质量.本文会详细的说明我们移动App项目gulp的使用经验,部分关于gulp的介绍来自国外网站. gulp是 Fractal公司发布的一个新的基于nodejs的构建系统,目标是取代Grunt,成为最流行的JavaScript任务运行器.目前ionic框架默认的构

基于requireJS和Gulp可快速搭建前端项目的脚手架

基于requireJS和Gulp可快速搭建前端项目的脚手架. 项目地址 git clone git@github.com:perfectSymphony/Gulp-cli.git 项目目录 ├── README.md # 项目说明 |—— bin # (在gulpfile文件中使用到)解析layout中的模板html,将完整的html产出到src/html中 ├── dist # 打包生成的项目文件 |—— logs # 监听编译less文件时,打印报错信息, ├── gulpfile.js #

gulp自动化构建工具的使用

gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A.下载安装: cnpm:cnpm i gulp -g 如果cnpm安装有问题:可使用yarn安装 yarn:   yarn global add gulp B.测试 gulp -v  2.本地安装(引入依赖模块,支持不同版本的项目运行) A.安装 a.创建一个新文件夹,初始化package.json