Gulp简介及一些常用插件介绍
2017-05-22 16:23
274 查看
Gulp 是用 nodejs 写的一个前端构建工具,我现在主要拿来自动编译 coffee、less 以及压缩图片、同步文件、清理多余文件等工作。 gulp 使用 stream 方式处理内容,主要使用的几个办置方法如下:
gulp-uglify用来压缩js文件,使用的是uglify引擎。
小技巧,第二个参数’!js/*.min.js’是用来过滤掉后缀为min.js,!感叹号为排除模式
可以使用它来压缩CSS文件
var gulp = require(‘gulp’);
var minify = require(‘gulp-minify-css’);
可以使用它来压缩html文件.
可以用来检查JS的代码
合并CSS与JS文件,减少http请求。
把less文件转换为css。
把scss文件转换为sass文件。
可以使用gulp-imagemin的插件来压缩jpg、png、gif等图片。(imagemin也是有插件的,是基于imagemin产生的插件,所以前缀是imagenin开头)
压缩png插件-imagemin-pngquant安装:
gulp-imagemin的使用比较复杂一点,它本身也有很多插件(更多imagemin插件),这里只是简单介绍一下,要想压缩不同格式的图片,必须对应安装不同的插件,这里只安装了pngquant插件。按照nodejs的模块化思想,每个require只包含一个功能,这样就可以达到按需加载的目的。
当代码变化时,它可以帮助我们自动刷新页面,该插件最好配合谷歌浏览器,且要安装livereload chrome extension扩展插件,否则无效。
npm init命令初始化当前文件夹后,在当前文件夹新建gulpfile.js文件。当前目录下的所有操作流都在gulpfile.js文件中定义
gulp.src: 来源 gulp.dest: 目标 gulp.pipe: 管道 gulp.watch: 监视文件系统,文件改动时自动处理 gulp.task: 任务
gulp-uglify (JS压缩)
gulp-uglify安装:npm install --save-dev gulp-uglify
gulp-uglify用来压缩js文件,使用的是uglify引擎。
var gulp = require('gulp'); //加载gulp var uglify = require('gulp-uglify'); //加载js压缩 // 定义一个任务 compass gulp.task('compass', function () { gulp.src(['js/*.js','!js/*.min.js']) //获取文件,同时过滤掉.min.js文件 .pipe(uglify()) .pipe(gulp.dest('javascript/')); //输出文件 });
小技巧,第二个参数’!js/*.min.js’是用来过滤掉后缀为min.js,!感叹号为排除模式
gulp-minify-css(CSS压缩)
gulp-minify-css安装:npm install --save-dev gulp-minify-css
可以使用它来压缩CSS文件
var gulp = require(‘gulp’);
var minify = require(‘gulp-minify-css’);
gulp.task('cssmini', function () { gulp.src(['css/*.css', '!css/*.min.css']) //要压缩的css .pipe(minify()) .pipe(gulp.dest('buildcss/')); });
gulp-minify-html(html压缩)
gulp-minify-html安装npm install --save-dev gulp-minify-html
可以使用它来压缩html文件.
var gulp = require('gulp'); var htmlmini = require('gulp-minify-html'); gulp.task('htmlmini', function () { gulp.src('*.html') .pipe(htmlmini()) .pipe(gulp.dest('minihtml')); })
gulp-jshint(JS代码检查)
gulp-jshint安装:npm install --save-dev gulp-jshint
可以用来检查JS的代码
var gulp = require('gulp'); var jshint = require("gulp-jshint"); gulp.task('jsLint', function () { gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter()); // 输出检查结果 });
gulp-concat(文件合并)
gulp-concat安装:npm install --save-dev gulp-concat
合并CSS与JS文件,减少http请求。
var gulp = require('gulp'); var concat = require("gulp-concat"); gulp.task('concat', function () { gulp.src('js/*.js') //要合并的文件 .pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js" .pipe(gulp.dest('dist/js')); });
gulp-less(编译Less)
gulp-less安装:npm install --save-dev gulp-less
把less文件转换为css。
var gulp = require('gulp'), less = require("gulp-less"); gulp.task('compile-less', function () { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css')); });
gulp-sass(编译Sass)
gulp-sass安装:npm install --save-dev gulp-sass
把scss文件转换为sass文件。
var gulp = require('gulp'), sass = require("gulp-sass"); gulp.task('compile-sass', function () { gulp.src('sass/*.sass') .pipe(sass()) .pipe(gulp.dest('dist/css')); });
gulp-imagemin(压缩图片)
gulp-imagemin安装:npm install --save-dev gulp-imagemin
可以使用gulp-imagemin的插件来压缩jpg、png、gif等图片。(imagemin也是有插件的,是基于imagemin产生的插件,所以前缀是imagenin开头)
压缩png插件-imagemin-pngquant安装:
$npminstall--save-devimagemin-pngquant
gulpfile.js:
var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); //png图片压缩插件 gulp.task('default', function () { return gulp.src('src/images/*') .pipe(imagemin({ progressive: true, use: [pngquant()] //使用pngquant来压缩png图片 })) .pipe(gulp.dest('dist')); });
gulp-imagemin的使用比较复杂一点,它本身也有很多插件(更多imagemin插件),这里只是简单介绍一下,要想压缩不同格式的图片,必须对应安装不同的插件,这里只安装了pngquant插件。按照nodejs的模块化思想,每个require只包含一个功能,这样就可以达到按需加载的目的。
gulp-livereload(自动刷新)
gulp-livereload安装:npm install --save-dev gulp-livereload
当代码变化时,它可以帮助我们自动刷新页面,该插件最好配合谷歌浏览器,且要安装livereload chrome extension扩展插件,否则无效。
var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'); gulp.task('less', function() { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); }); gulp.task('watch', function() { livereload.listen(); //要在这里调用listen()方法 gulp.watch('less/*.less', ['less']); //监听目录下的文件,若文件发生变化,则调用less任务。 });
相关文章推荐
- 常用gulp插件介绍(二)
- 使用gulp时常用的插件介绍及用法
- ElasticSearch简介、常用命令及插件介绍
- gulp常用插件介绍
- gulp前端自动化构建工具:常用插件介绍及使用
- ElasticSearch简介、常用命令及插件介绍
- 常用gulp插件介绍(一)
- 本文介绍了ASP.NET常用的一些代码
- 一些VC插件的简介
- Sqlite简单介绍与一些常用的例子
- C++中一些不常用的前缀介绍
- C++中一些不常用的前缀介绍
- 为ASP.NET MVC开发一些常用插件(二)—— 实现无刷新文件上传
- 一些常用的Live Writer插件
- 为ASP.NET MVC开发一些常用插件(三)——Repeater
- 一些常用的插件及验证脚本
- 一些vc插件简介
- 常用的一些编码方案简介