什么是gulp?
一个前端构建工具，通过脚本实现文件、图片的压缩等功能，
功能的实现依赖于插件，所以想使用什么功能，必须先安装对应的插件。
gulp的安装、使用
1、安装node环境
node环境安装包下载地址：https://nodejs.org/en/download/
根据操作系统选择不同平台的安装包，下载完毕后双击安装包即可安装。
安装完毕后再控制台（windows系统使用DOS窗口）输入以下命令测试是否安装成功：
查看node版本号：node -v
查看npm版本号：npm -v
输入以上命令，只要控制台能打印出版本号就说明已经安装成功，否则需要重新安装。
2、全局安装gulp
在DOS中执行：npm install -g gulp
3、在要使用gulp的项目中单独安装一次gulp（方便单独操作各个项目），同时安装所需要的插件
gulp-uglify插件是压缩.js文件的插件
命令： npm install gulp gulp-uglify
4、在项目根目录下创建gulpfile.js文件，在文件中定义需要完成的任务
var gulp = require('gulp'),
uglify = require('gulp-uglify');
/* task函数：开启gulf任务的函数，第一个参数是任务名称，在执行
* 任务时是通过任务名称调起执行，如果不给任务名称的值或值是default，则表示该任务
* 是默认任务：在调起相关任务时，没有指定任务名称，会执行默认任务（DOS命令：gulp）。
* 若给任务名称，则在执行gulpfile.js文件时，DOS命令为 gulp + 任务名称
*/
/*gulp.task('default', function(){
gulp.src('./index.js')
.pipe(uglify())
.pipe(gulp.dest('./index-min.js')); // 写入到指定的文件夹
});*/
gulp.task('hello', function(){ // hello为任务名称
gulp.src('./*js') // 压缩所有的.js文件
.pipe(uglify())
.pipe(gulp.dest('./index.min.js')); // 写入到指定的文件夹（例如：index.min.js是文件夹名称）
// .pipe(gulp.dest('index.min.js/')); // 将压缩的文件.js存放在index.min.js文件中
});
5、切换到gulpfile.js所在的文件夹下，运行gulp任务
DOS命令：gulp 任务名称
如果gulp命令后没有加任务名，则执行默认任务（default）
如果gulp后添加了任务名，则执行指定的任务
gulp的常用的方法
1、gulp.src(path)：指定要操作的文件（以流的形式读取出来）。
参数是要读取的文件的路径，如果要匹配多个文件路径，可以使用数组结构
2、gulp.task(name , function)：
name：任务名，如果没有指定任务名，默认是default
function：任务所对应的实现函数
注意：如果需要按某个顺序执行多个任务，可以在中间插入第二个参数：依赖任务
// 只要执行default任务，就相当于把one、two、three这三个任务执行了
gulp.task('default',['one','two','three']);
3、gulp.dest(path)：把文件流写入到指定的位置
参数是要写入的路径（文件名是读取时的名字），如果需要修改写入的文件名，则需要使用插件修改：gulp-rename
gulp常用插件
1、重命名插件
安装方法：npm install gulp-rename
image.png
2、js文件压缩插件
安装方法：
npm install gulp-uglify
image.png
3、CSS文件压缩
安装发法：
npm install gulp-minify-css
image.png
4、js代码语法检查
安装方法：
npm install gulp-jshint
image.png
5、文件合并
安装方法：
npm install gulp-concat
image.png
6、less编译
安装方法：
npm install gulp-less
image.png
实例：
gulpfile.js文件
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
/* task函数：开启gulf任务的函数，第一个参数是任务名称，在执行
* 任务时是通过任务名称调起执行，如果不给任务名称的值或值是default，则表示该任务
* 是默认任务：在调起相关任务时，没有指定任务名称，会执行默认任务（DOS命令：gulp）。
* 若给任务名称，则在执行gulpfile.js文件时，DOS命令为 gulp + 任务名称
*/
/*gulp.task('default', function(){
gulp.src('./index.js')
.pipe(uglify())
.pipe(gulp.dest('./index-min.js')); // 写入到指定的文件夹
});*/
gulp.task('hello', function(){ // hello为任务名称
gulp.src('./index.js') // 压缩所有的.js文件
.pipe(uglify()) // 使用插件进行压缩.js文件
.pipe(rename('./index.min.js')) // 调用rename插件
.pipe(gulp.dest('./index.min.js')); // 写入到指定的文件夹（例如：index.min.js是文件夹名称）
// .pipe(gulp.dest('index.min.js/')); // 将压缩的文件.js存放在index.min.js文件中
});
网友评论