安装gulp
因为gulp是基于node的管理工具,所以要先安装nodejs
安装nodejs
nodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.org/en/
下载后直接运行.msi文件
安装完成后,打开命令行(win+R)键入node -查看node版本
全局安装gulp
npm install -g gulp
在项目目录下安装gulp,若要在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:
(项目目录下安装gulp打开命令行方式:shift+鼠标右键–>选择在此处打开命令行)
npm install gulp --save-dev
使用gulp -v查看是否成功安装(图左:全局查看gulp是否成功安装,图右:项目目录查看gulp是否成功安装)
使用gulp
创建gulpfile.js文件
var gulp = require('gulp'); gulp.task('default',function(){ console.log('hello world'); });
创建package.json文件
npm init
运行gulp任务
在项目下打开命令行键入gulp , 执行任务.如下图
gulpAPI
gulp.src()
用来读取文件
gulp.src(globs[, options])
gulp.dest()
用来写文件
gulp.dest(path[,options])
gulp.task()
用来定义任务
gulp.task(name[, deps], fn)
gulp.watch()
用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。例如
gulp.watch(glob[, opts], tasks)
gulp常用插件安装命令
重命名文件
npm install --save-dev gulp-rename
css压缩
npm install --save-dev gulp-minify-css
js文件压缩
npm install --save-dev gulp-uglify
文件合并
npm install --save-dev gulp-concat
编译less
npm install --save-dev gulp-less
编译sass
npm install --save-dev gulp-sass
图片压缩
npm install --save-dev gulp-imagemin
include
npm install gulp-file-include
使用gulp插件
项目目录结构
示例路径配置
option = {//编译后存放文件的目录 buildpath :'dist' } coding={//开发目录 buildpath :'src' }
css文件压缩
安装:npm install –save-dev gulp-minify-css
var gulp = require( 'gulp'), rename = require('gulp-rename')//重命名 minifycss = require('gulp-minify-css'); gulp.task('minifycss', function() { return gulp.src('src/css/!*.css') //压缩的文件 .pipe(rename({suffix: '.min'})) //重命名文件 .pipe(gulp.dest('dist/css')) //输出文件夹 .pipe(minifycss()); //执行压缩 });
编译less
安装:npm install –save-dev gulp-less
var gulp = require('gulp'), less = require('gulp-less');//编译less gulp.task('less',function(){ return gulp.src(coding.buildpath +'/less/*.less') //less文件路径 .pipe(less()) .pipe(gulp.dest(option.buildpath + '/css/'))//输出文件夹 })
编译sass
安装:npm install –save-dev gulp-sass
var gulp = require('gulp'), sass = require(('gulp-sass'); gulp.task('sass',function(){ return gulp.src(coding.buildpath +'/sass/*.scss')//sass文件路径 .pipe(sass()) .pipe(gulp.dest(option.buildpath +'/css/'))//输出文件夹 })
js文件压缩
安装:npm install –save-dev gulp-jshint
var gulp = require('gulp'), uglify = require('gulp-rename'), //重命名 uglify = require('gulp-uglify'); gulp.task('minifyjs', function () { gulp.src(coding.buildpath + '/js/*.js')//文件压缩前的路径 .pipe(uglify()) //压缩 .pipe(rename({suffix: '.min'}))//会将*.js重命名为*.min.js .pipe(gulp.dest(option.buildpath + '/js/'));//文件压缩后的存放路径 });
图片压缩
安装:npm install gulp-imagemin imagemin-pngquant –save-dev
var gulp = require('gulp'), uglify = require("gulp-uglify"), //重命名 imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'); gulp.task('imagemin',function(){ return gulp.src(coding.buildpath+ '/image/*') .pipe(imagemin({ progressive:true,//无损压缩jpg图片 svgoPlugins: [{removeViewBox: false}] // 不移除svg的viewbox属性 use:[pngquant()] //使用pngquant来压缩png图片 })) .pipe(imagemin()) .pipe(gulp.dest(option.buildpath+'/image/')) })
合并文件
安装:npm install gulp-concat –save-dev
var gulp = require('gulp'), concat = require('gulp-concat'); gulp.task('concat',function(){ return gulp.src(coding.buildpath +'/css/*.css') .pipe(concat('all.min.css')) .pipe(gulp.dest(option.buildpath + '/css/')) })
清理文件
安装:npm install del –save-dev
var gulp = require('gulp'), del = require('del'); gulp.task('clean',function(cb){ return del([option.buildpath],cb); })
监听文件(无需另外安装)
gulp.task('watchImgs',function(){ gulp.watch([coding.buildpath + '/image/**'],['imagemin']); }) gulp.task('watchJs',function(){ gulp.watch([coding.buildpath + '/js/**'],['minifyjs']) })
include
安装:npm install gulp-file-include
gulp.task('include',function(){ return gulp.src(coding.buildpath + '/page/*.html') .pipe(include({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(option.buildpath + '/page/')) })
编译前
编译后
执行任务
gulp.task('watch',['watchJs']) gulp.task('default',[('clean'], function () { gulp.start('minifyjs','less','concat','sass','imagemin','include'); });
启动watch
gulp watch(项目目录下,在命令行中输入)
执行task任务
gulp(项目目录下,在命令行中输入)
执行单个任务 : gupl task名称(例如 gulp include)