整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

前端程序员之gulp入门

ulp入门

1、确定目录结构

-xiangmu
	-src     //源码
		+pages   //html
		+css	//css
		+js		//js

2、常用API

gulp.task()
含义：gulp.task(任务名称，任务处理函数)
作用：创建任务
gulp.task('html',function(){
    //找到html源文件，进行压缩，打包，放入指定目录
})
gulp.src()
含义： gulp.src(路径信息)
作用：找到源文件
书写方式：
gulp.src('./a/b.html')->找到指定的一个文件
gulp.src('./a/*.html')->找到指定目录下，指定后缀的所有文件
gulp.src('./a/**')->找到指定目录下的所有文件
gulp.src('./a/** /*')->找到a目录下所有子目录里面的所有文件
gulp.src('./a/** /*.html')->找到a目录下所有子目录里面的所有.html文件
gulp.dest()
含义：gulp.dest(路径信息)
作用：把一个内容放入指定目录内
gulp.dest('./abc')
	->把他接收到的内容放到abc目录下
gulp.watch()
含义：gulp.watch(路径信息，任务名称)
作用：监控指定目录文件下的文件，一旦发生变化，重新执行后面的任务
gulp.watch('./src/pages/*.html',html)
	->当指定目录下的html文件发生变化， 就会执行html这个任务
gulp.series()
含义：按照同步顺序执行任务
语法：gulp.series(任务1，任务2，任务3。。。)
作用：逐个执行多个任务，前一个任务结束，第二个任务开始
gulp.parallel()
含义：按照异步执行任务
语法：gulp.parallel(任务1，任务2，任务3.。。)
作用：并行开始多个任务
pipe()
管道函数
进入下一个流过程的管道函数
gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))

3、打包css任务

下载：npm i gulp-cssmin -S
导入：const cssmin=require('gulp-cssmin')

下载：npm i gulp-autoprefixer -S
导入：const autoPrefixer=require('gulp-autoprefixer')

const cssHandler=function (){
    return gulp
    	.src('./src/css/*.css')
    	.pipe(autoPrefixer())
    	.pipe(cssmin())
    	.pipe(gulp.dest('./dist/css/'))
}
//需要将这个函数导出
module.exports.cssHandler=cssHandler
//执行指令gulp cssHandler

4、打包js任务

下载:npm i -S gulp-uglify
导入:const uglify=require('gulp-uglify')

下载将es6转为es5的插件
npm i -S gulp-babel
npm i -S @babel/core
npm i -S @babel/preset-env

const gulp=require('gulp')
const uglify=require('gulp-uglify')
const babel=require('gulp-babel')

const jsHandler=function(){
       return gulp
    	.src('./src/js/*.js')
    	.pipe(babel({
           //如果是babel@7版本，就写presets:['es2015']
           presets:['@babel/ennv']   //babel@8版本
       }))
    	.pipe(uglify())  //压缩
    	.pipe(gulp.dest('./dist/js/'))
}
module.exports.jsHandler=jsHandler

//执行指令gulp jsHandler

5、打包html任务

下载：npm i -S gulp-htmlmin
导入：const htmlmin=require('gulp-htmlmin')

const gulp=require('gulp')
const htmlmin=require('gulp-htmlmin')

const htmlHandler=function(){
       return gulp
    	.src('./src/html/*.html')
    	.pipe(htmlmin({
           collapseWhitespace:true, //表示移除空格和换行
           removeEmptyAttributes:true,//表示移除空的属性(仅限于原生属性class、id等等)
           collapseBooleanAttributes:true,//移除checked类似的布尔值属性
           minifyCSS:true,//压缩内嵌式css代码(只能基本压缩，不能自动添加前缀)
           minifyJS:true,//压缩内嵌式js代码(只能基本压缩，不能转码)
           removeStyleLinkTypeAttributes:true, //移除style和link标签上的type属性
       }))   //通过配置的参数进行压缩
    	.pipe(gulp.dest('./dist/html/'))
}
module.exports.htmlHandler=htmlHandler

//执行指令gulp htmlHandler

6、配置默认任务执行打包（二选一）

//异步方法
module.exports.default=gulp.parallel(cssHandler,htmlHandler,jsHandler) 
//同步方法
module.exports.default=gulp.series(cssHandler,htmlHandler,jsHandler)	

//进行打包   gulp default 或者gulp

还不会gulp的朋友们赶紧收藏起来吧。有不懂的可以留言。

们在前两篇文章中介绍了gulp环境搭建和配置，也简单的讲了一个css代码压缩的插件。因为gulp插件实在是太多，没有办法给童靴们一一去讲了，望童靴们见谅。

下面附上小编初学gulp时配置的一个项目的代码，供大家学习与参考。

安装插件的命令行：cnpm install 插件名 --save-dev

var gulp = require("gulp"),

del = require("del"), //清空数据

concat = require("gulp-concat"), //文件合并

rename = require("gulp-rename"), //重命名

sass = require("gulp-ruby-sass"), //sass编译

less = require('gulp-less'), //less编译

minifyCss = require("gulp-minify-css"), //css压缩

cleancss = require('gulp-clean-css'),

autoprefixer = require("gulp-autoprefixer"), //自动补全css前缀

uglify = require("gulp-uglify"), //js压缩

jshint = require("gulp-jshint"), //js格式检查

notify = require("gulp-notify"), //消息通知

connect = require('gulp-connect'), //WEB测试服务器

livereload = require("gulp-livereload"), //自动刷新

cache = require("gulp-cache"), //图片缓存，只有图片替换了才压缩

images = require("gulp-imagemin"), //图片压缩

pngquant = require('imagemin-pngquant'), //图片压缩

gulpReactify = require('gulp-reactify'),

reactTools = require('react-tools'),

browserSync = require('browser-sync').create();

var path={

src : "src/",

html : "src/html/",

css : "src/css/",

js : "src/js/",

sass : "src/sass/",

img : "src/images",

}

/*-----------------移动html---------------*/

gulp.task("html",function(){

return gulp.src(path.html+'**/*')

.pipe(gulp.dest("dist/html"))

.pipe(browserSync.stream());

})

gulp.task("html1",function(){

return gulp.src(path.src+'*.html')

.pipe(gulp.dest("dist"))

.pipe(browserSync.stream());

})

/*-----------------压缩css---------------*/

gulp.task("minifyCss",function(){

return gulp.src(path.css+'*.css')

.pipe(minifyCss())

.pipe(gulp.dest('dist/css'))

.pipe(browserSync.stream());

})

/*-----------------压缩js---------------*/

gulp.task("uglify",function(){

return gulp.src(path.js+"*.js")

.pipe(uglify())

.pipe(gulp.dest('dist/js'))

.pipe(browserSync.stream());

})

/*-----------------复制目录---------------*/

gulp.task('copy', function() {

return gulp.src('src/js/public/**/*')

.pipe(gulp.dest('dist/js/public'))

});

/*---------------- 编译 SASS 自动补全前缀 ----------------*/

//gulp.task('sass', function(){

//return sass(path.sass+'*.scss')

//.pipe(autoprefixer({browsers: ['last 2 versions', 'safari 5', 'opera 12.1', //'ios 6', 'android 4']}))

// .pipe(gulp.dest(path.css))

//.pipe(minifyCss())

//.pipe(gulp.dest('dist/css'))

//.pipe(browserSync.stream());

//});

/*---------------- 压缩图片 ----------------*/

gulp.task('images', function(){

return gulp.src('src/images/*.{png,jpg,gif,ico}')

.pipe(cache(images({ optimizationLevel: 3, progressive: true, interlaced: true })))

.pipe(images({

progressive: true,

svgoPlugins: [{removeViewBox: false}],

use: [pngquant()]

}))

.pipe(gulp.dest('dist/images'))

});

/*---------------- Clean ----------------*/

//gulp.task('clean',del.bind(null,['dist/**/*']));

/*---------------- 测试服务器 ----------------*/

// gulp.task('default', ['connectDev', 'watch']);

/*---------------- reload server ----------------*/

// gulp.task('reload-dev',['uglify','minifyCss','images'],function() {

// gulp.src(path.src + '**/*.*')

// .pipe(connect.reload());

// });

//server

gulp.task('server',function(){

browserSync.init({

port:8087,

server:{

baseDir:"./src"

}

})

})

/*--------------监听--------------------*/

gulp.task('watch',function(){

gulp.watch('src/css/*.css',['minifyCss']) //（监听文件的路径，[监听的任务名称]）

gulp.watch('src/js/*.js',['uglify'])

gulp.watch('src/html/**/*',['html'])

gulp.watch('src/*.html',['html1'])

gulp.watch('src/images/**/*.*',['images'])

gulp.watch('src/js/public/**/*',['copy'])

})

/*--------------默认命令--------------------*/

gulp.task('run',function(){

gulp.start('html','html1','minifyCss','uglify','copy','images','watch','run','server')

})

安装插件的一些注意事项

1.注意安装js格式检查：只安装 gulp-jshint会报错，还需要安装：npm install jshint --save-dev。

2.使用gulp-ruby-sass时，用sass不是gulp.src来编译Sass文件。

gulp-sass:依赖于node-sass这个库,node-sass是对libsass的Node绑定

*两者不同*

gulp-ruby-sass是调用sass，所以需要ruby环境，需要生成临时目录和临时文件

gulp-sass是调用node-sass,有node.js环境就够了，编译过程不需要临时目录和文件，直接通过buffer内容转换。

爱学习的孩子运气不会差哦~

关注小白前端，持续收到文章推送！

ulp是是前端开发对代码进行构建的工具，是基于 Nodejs 的自动任务运行器，他能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在开发中使用能有效提高工作效率，使用：

既是基于Nodejs的任务运行器，自然就需要先安装Nodejs环境，以下便是安装步骤：

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1. 安装 NodeJS 环境

到nodeJS官网选择下载，运行安装包安装即可。

2.初始化，生成package.json 文件：

在项目文件夹下打开命令提示符执行下列命令（打开方式：shift+鼠标右键，在此处打开明亮窗口）：

npm init

选装 cnpm( npm淘宝镜像 )：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 全局安装 gulp

npm install gulp -g

全局安装好后，可以在命令提示符下使用 gulp 的命令行工具（使用 gulp 命令）

gulp -v

**以上全局安装一次即可**

4. 在项目目录中生成 package.json 文件

npm init

使用默认输入，一路回车即可

或：npm init -y

5. 在项目本地安装 gulp(安装好后，在项目目录下生成 node_modules 文件夹)

npm install gulp --save-dev

或

npm i gulp --save-dev

或

npm i gulp -D

6. 安装 gulp 插件：

gulp-clean-css(压缩CSS)

npm install gulp-clean-css -D

gulp-htmlmin(压缩html)

npm i gulp-htmlmin -D

gulp-babel(将ES6的代码转换为ES5的代码)

npm install gulp-babel babel-core babel-preset-env --save-dev

gulp-uglify(压缩JS)

npm i gulp-uglify -D

gulp-rename(重命名)

npm i gulp-rename -D

gulp-imagemin(压缩图片)

gulp-concat(合并文件)

gulp-connect ( webserver 能够部署静态资源，能够实现浏览器自动刷新--需要浏览器插件支持--livereload)

npm i gulp-connect（连接）

7. 在项目根目录下，创建 gulpfile.js(固定名称) 的文件：

**gulpfile.js：**

//引入模块

const gulp = require("gulp"),

connect = require("gulp-connect"),

sass = require("gulp-sass");

//定制，启动服务器

gulp.task("connect",function(){

connect.server({

root:"dist",//webserver的根目录

livereload:true//浏览器自动刷新

});

});

//复制HTML文件到dist目录下，让HTML页面重新加载

gulp.task("html",function(){

gulp.src("src/**/*.html")

.pipe(gulp.dest("dist"))

.pipe(connect.reload());

});

//复制js文件到dist目录下,js重新加载

gulp.task("js",function(){

gulp.src("src/js/**/*.js")

.pipe(gulp.dest("dist/js"))

.pipe(connect.reload());//浏览器自动刷新

});

//复制lib目录到dist下

gulp.task("copy-lib",function(){

gulp.src("src/lib/**/*.*")

.pipe(gulp.dest("dist/lib"))

});

//复制img目录到dist下

gulp.task("copy-img",function(){

gulp.src("src/img/**/*.*")

.pipe(gulp.dest("dist/img"))

});

//复制mock目录到dist下

gulp.task("copy-mock",function(){

gulp.src("src/mock/**/*.*")

.pipe(gulp.dest("dist/mock"))

});

gulp.task("copy",["copy-lib","copy-img","copy-mock"])

//编译*.scss文件为*.css

gulp.task("sass",function(){

gulp.src("src/sass/*.scss")

.pipe(sass({outputStyle:"compressed"}))

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload());

})

//监视文件的修改

gulp.task("watch",function(){

gulp.watch("src/sass/*.scss",["sass"]);

gulp.watch("src/**/*.html",["html"]);

gulp.watch("src/js/**/*.js",["js"]);

});

//定制默认（缺省）任务

gulp.task("default",["html","js","sass","copy","connect","watch"])

8. 在命令行中执行任务：

gulp 任务名称

或 gulp

9.本地访问localhost或本机IP即可运行项目

Gulp运行成功结果如下：


在线咨询
上一篇：如何在网页中使用 web 字体？
下一篇：我们应该如何写好HTML&CSS

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 黑山县 漾濞彝族自治县 彭州市 新平彝族傣族自治县 月湖区 京山县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服