gulp简介

gulp简介

参考文档：https://www.zhihu.com/question/35479764

            https://www.zhihu.com/question/35479764/answer/115390288

            http://www.sheyilin.com/2016/02/gulp_introduce/#more-283

1.Gulp 则是一种前端工作流的工具，它可以解决前端中很多其实并不需要人力参与的工作，「工作流」是业务过程的自动化，前端工作流，就是把前端业务中的一些工作用计算机工具自动完成。例如：

• 压缩静态资源
• 变更静态资源
• 给静态资源添加 md5
• 修改预处理样式后自动编译（SASS，Less）
• 合并雪碧图
• 自动刷新浏览器
• ...

这类工作还可以列举很多，在前端工作流出现之前，这些工作都由人力完成，而这些工作往往比写业务本身更加费时，而交给了 Gulp这类工具，则可以释放这些人力。

1.安装nodejs

Node.js是一个。实际上它是对Google V8引擎进行了封装。

2.npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次

3.npm install gulp

把目录切换到你的项目文件夹中，然后在命令行中执行

4.建立gulpfile.js文件（gulp的主文件）

此时我们的目录结构是这样子的：

├──gulpfile.js

├── node_modules

│ └── gulp

└── package.json

 gulpfile.js，配置及说明

// Loadplugins 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'), 

// 可以includehtml文件 

autoprefixer=require('gulp-autoprefixer'); 

//添加CSS浏览器前缀 

// sassgulp.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)两个版本 });

5.运行gulp任务，例如gulp sass，如果没有指定任务名，则会执行任务名为default的默认任务。