Gulp与Grunt差不多,也是一款构建工具,它能够自动执行我们前端常见的任务,
如编译Sass、Less,压缩js和刷新浏览器等等,以此来改进前端的工作方式,提高生产力.
- 安装Node.js
- 由于Gulp是基于Node.js构建的,
- 所以在使用Gulp之前,首先安装Node.js(自行搜索node.js安装),
- 安装Node.js方式非常简单,下载后运行安装包,一直下一步即可,
- 安装完成后打开cmd控制台(window)输入 node-v 查询版本号确认node安装完毕。
- 让当前目录作为项目文件夹开始初始化,
- 项目初始化指令-->npm init初始化完后会有一个package.json的文件里面是一些描述项目的一些记录,
- 项目名称、作者、开发时依赖的一些插件,
- 不初始化也可以使用gulp。
- package.json说明
- name //项目名称
- version //项目版本号
- description //项目描述
- homepage //项目官网url
- author //作者名
- contributors // 项目其他贡献者
- dependencies //项目依赖列表
- devDependencies //开发环境依赖的列表
- repository //项目代码存放的地方类型, git/svn
- main //它是一个模块ID它是一个指向你程序的主要项目
- keywords //关键字
在cmd控制台下输入命令进行安装Gulp -g代表是全局安装
npm install -g gulp
全局安装后,要想在项目里使用还得在项目的文件夹下,安装本地gulp --save-dev会把插件记录记录在package.json中。
npm install gulp -save-dev //在项目文件夹下使用
在项目文件夹下创建一个 gulpfile.js 文件,
然后在gulpfile.js中开始编写gulp插件,
gulp常用插件 - - - - v
上面流程走完后安装gulp-minify-css
npm install --save-dev gulp-minify-css
然后开始编写 gulpfile.js文件
- var gulp = requrie('gulp'); // 引入gulp
- var minify = require('gulp-minify-css'); //引入压缩css的模块
- //创建一个压缩任务
- gulp.task('minifycss',
- function() {
- //指定当前文件下的所有后缀为.css的文件
- gulp.src('*.css')
- //使用minify模块进行压缩
- .pipe(minify())
- //最终将压缩的文件输出到minicss文件下
- .pipe(gulp.dest('minicss'))
- })
以上为例安装压缩js的插件
npm install --save-dev gulp-uglify
- var gulp =require('gulp'); //引入gulp
- var uglify = require('gulp-uglify');//引入js压缩模块
- //创建一个压缩js的任务
- gulp.task('minifyjs',function(){
- //指定当前文件夹下的所有JS文件
- gulp.src('*.js')
- //进行重命名 可以设置名字为类似(mini.min.js)
- .pipe(rename({suffix:'.min'}))
- //进行压缩
- .pipe(uglify())
- //将压缩后的文件输出到minijs文件夹下
- .pipe(gulp.dest('minijs'))
- })
以上为例安装压缩html的插件
npm install --save-dev gulp-minify-html
- var gulp = require('gulp'); //引入gulp
- var minhtml = require('gulp-minify-html'); //引入js压缩模块
- //创建一个压缩html的任务
- gulp.task('minhtml',
- function() {
- //指定当前文件夹下的所有html文件
- gulp.src('*.html')
- //进行压缩
- .pipe(minhtml())
- //将压缩后的文件输出到minihtml文件夹下
- .pipe(gulp.dest('minihtml'))
- })
以上为例安装检测js的插件
npm install --save-dev jshint gulp-jshint
- var gulp =require('gulp'); //引入gulp
- var concat = require('gulp-jshint');//引入检测js文件模块
- //创建一个检测js的任务
- gulp.task('concat',function(){
- //指明要检测的文件
- gulp.src('*.js')
- .pipe(jshint())
- //输出检查结果
- .pipe(jshint.reporter());
- })
以上为例安装文件合并的插件
npm install --save-dev gulp-concat
- var gulp = require('gulp'); //引入gulp
- var concat = require('gulp-concat'); //引入合并文件模块
- //创建一个合并任务
- gulp.task('concat',
- function() {
- //指明要合并的文件
- gulp.src('*.js')
- //合并找到的js文件并命名为'merge.js'
- .pipe(concat('merge.js'))
- //将合并后的文件输出到concat文件夹下
- .pipe(gulp.dest('concat'));
- })
以上为例安装编译Less的插件
npm install --save-dev gulp-less
- var gulp = require('gulp'); //引入gulp
- var lecss = require('gulp-less'); //引入编译模块
- //创建一个编译任务
- gulp.task('compile-less',
- function() {
- //指明要编译的文件
- gulp.src('*.less')
- //进行编译
- .pipe(lecss())
- //将编译后的文件输出到css文件夹下
- .pipe(gulp.dest('css'));
- })
以上为例安装编译Sass的插件
npm install --save-dev gulp-sass
- var gulp = require('gulp'); //引入gulp
- var sacss = require('gulp-sass'); //引入编译模块
- //创建一个编译任务
- gulp.task('compile-sass',
- function() {
- //指明要编译的文件
- gulp.src('*.sass')
- //进行编译
- .pipe(sacss())
- //将编译后的文件输出到css文件夹下
- .pipe(gulp.dest('css'));
- })
以上为例安装压缩图片插件
npm install --save-dev gulp-imagemin
- var gulp = require('gulp'); //引入gulp
- var imagemin = require('gulp-imagemin');
- //创建一个压缩任务
- gulp.task('pngquant',
- function() {
- gulp.src('src/*.{png,jpg,gif,ico}').pipe(imagemin({
- progressive: true,
- //Boolean类型 默认:false 无损压缩图片
- optimizationLevel: 5,
- //number类型 默认:3 取值范围:0-7(优化等级)
- interlced: true,
- //Boolean类型 默认false 隔行扫描gif进行渲染
- multipass: true //Boolean类型 默认false 多次优化svg直到完全优化
- //开始压缩png图片
- })).pipe(gulp.dest('img'))
- })
以上为例安装自动刷新的插件
npm install --save-dev gulp-livereload
当代码变化时可以帮助我们自动刷新页面。
- // 基本使用(当less发现变化的时候自动更新页面)
- var gulp = require('gulp'),
- less = require('gulp-less'),
- livereload = require('gulp-livereload');
- gulp.task('less',
- function() {
- gulp.src('src/less/*.less').pipe(less()).pipe(gulp.dest('src/css')).pipe(livereload());
- });
- gulp.task('watch',
- function() {
- livereload.listen(); //要在这里调用listen()方法
- gulp.watch('less/*.less', ['less']); //监听目录下的文件,若文件发生变化,则调用less任务。
- });
谷歌浏览器或者火狐浏览器需要安装livereload插件
来源: https://juejin.im/post/5a1b88d26fb9a0451e3f8387