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，配置及说明

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

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