gulp的使用

最新推荐文章于 2022-02-27 17:19:09 发布

原创最新推荐文章于 2022-02-27 17:19:09 发布 · 772 阅读

1 ·

CC 4.0 BY-SA版权

gulp 专栏收录该内容

1 篇文章

订阅专栏

本文介绍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 : 合并html
gulp-rev: 添加版本号
gulp-rev-collector: 内容替换
gulp-useref
gulp-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'))
})