gulp的使用

gulp是一个项目构建工具，它可以将我们项目中做的less，css，js，html，image等文件自动进行转为我们需要的样式。

安装

gulp的安装需要进行两次：首先全局安装一次，再在本地安装一次全局安装：npm install -g gulp本地安装：npm install gulp --save-dev在本地安装过后，要在项目文件夹下建一个 gulpfile.js文件用来管理我们的任务清单

gulp的使用

创建一个任务

gulp.task('任务名'，function(){ 任务处理程序 })；运行任务：在cmd中执行 gulp 任务名；

指定源文件的位置

gulp.src('path')  path：是源文件的路径ps：gulp.src('./pbulic/*.less)

指定处理过的文件的存放位置

gulp.src('path').pipe(less()).pipe(gulp.dest('newPath'))上面代码的意思是将path路径的less文件转为css文件存放在newPath路径下。

插件

gulp插件下载： npm install 插件名gulp-less : 编译less文件；gulp-autoprefixer :添加css私有前缀；gulp-cssmin : 压缩css代码gulp-rename: 重命名gulp-imagemin:图片压缩gulp-uglify : 压缩javascript代码gulp-concat:合并代码gulp-htmlmin : 合并htmlgulp-rev: 添加版本号gulp-rev-collector: 内容替换gulp-userefgulp-if

gulpfile.js示例

var gulp = require('gulp');var less = require('gulp-less');var cssmin = require('gulp-cssmin');var concat = require('gulp-concat')gulp.task('less',function(){    gulp.src('./public/*.less')    .pipe(less())    .pipe(cssmin())    .pipe(gulp.dest('./newPublic/css'))})gulp.task('concat',function(){    gulp.src('../public/*.js)    .pipe(concat('all.js'))    .pipe(pulp.dest('./newpublic'))})