gulp.js是什么?
gulp.js是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
gulp.js优势
- 易于使用
通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。 - 构建快速
利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。 - 插件高质
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 - 易于学习
通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
gulp安装
全局安装gulp
$ npm install --global gulp
安装package.json文件
$ npm init
项目内安装gulp
$ npm install gulp --save-dev
也可以在package.json文件添加代码再 npm install
进行安装
安装其他gulp插件
- 合并
gulp-concat 合并文件
- 压缩
gulp-minigy-html 压缩html
gulp-minify-css 压缩css
gulp-uglify 压缩js
gulp-imagemin 压缩图片
- 编译
gulp-less 将less编译成css
gulp-sass 将scss编译成css
gulp-babel 将ES6编译成ES5
…..
新建gulpfile.js文件
编写任务处理代码
gulp使用
打开gulpfile.js文件,编写任务处理代码
var gulp = require('gulp');//引入gulp
//创建任务,终端输入"gulp taskname1" 运行 taskname1
gulp.task('taskname1',function(){
return console.log("this is taskname1!");
});
gulp.task('taskname2',function(){
return console.log("this is taskname2!");
})
//创建多任务,终端直接输入gulp运行taskname1和taskname2
gulp.task('default',['taskname1','taskname2']);
copyhtml代码
var gulp = require('gulp');
gulp.task('copyhtml',function(){
//把src/下的所有html文件,copy到dist文件夹里面
gulp.src('src/*.html')
.pipe(gulp.dest('dist'));
});
$ gulp copyhtml
压缩图片
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('imageMin',function(){
//把src/images/中的所有图片进行压缩,然后输出到dist/images文件夹里
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images');
})
$ gulp imageMin
文件监听
var gulp = require('gulp');
gulp.task('watch',function(){
gulp.watch('src/*.html',['copyhtml']);
gulp.watch('src/images/*',['imageMin']);
});
$ gulp watch
多任务处理
gulp.task('default',['copyhtml','imageMin','watch']);
$ gulp
常用的gulp方法
- gulp.task() 定义任务
- gulp.src() 需要执行任务的文件
- gulp.dest() 执行任务后文件的去处
gulp.watch() 观察文件是否发生变化
利用none中的pipe进行输入输出操作,把 pipe()左边的放到pipe(里面)