gulp前端开发环境-零基础详细教程

gulp前端开发环境|前端开发者

1.首先要安装node.js,百度node进入官网,安装的时候一路下一步。和安装QQ一样
2.我们要有自己的命令行工具,window死系统的用户推荐使用gitbash或者github自带的命令行工具。本菜鸟用的就是github命令行工具(其实这都无所谓)
3.自己的编辑器,

1首先新建一个项目目录,并且里面新建两个文件一个build一个src文件

(前面加个a能让他排到编辑器项目的最上面我点的方便,所以不要纠结啊)
src目录是我们开发的目录就是里面放你css文件,js文件,图片和html文件,build目录是一饮而尽处理之后存放的目录,将来我们就是拿构建目录里面的东西放到服务器上的

然后用自己的命令行工具进入到项目目录里

命令行进入项目目录(是和src,build同级目录)用的是cd命令。(这点大家都应该知道吧)

我们都知道node.js自带一个一个npm包管理工具,这个工具是给我们提供安装我们需要的依赖用的(不懂的不用纠结一会看图说话)。因为npm网速有点慢我这里用的cnpm淘宝镜像..

打开命令行输入npm install -g cnpm –registry = https://registry.npm.taobao.org回车这里安装cnpm安装好后之后所有我们安装依赖的时候把所有的npm换成cnpm速度会大大提高;

cnpm安装好后全局安装gulp命令行输入cnpm install -g gulp回车好,目前我们cnpm和全局gulp已经安装好。

用命令行进入项目目录(好像已经进入过了),输入命令npm init -y回车(这是npm初始化一个目录吧,只要记住就好了)

 

初始化完成之后你会发现你的项目目录里多了一个的package.json文件这个文件是NPM的配置文件(一般不用管他)

package.json文件出来后,我们在他的同级目录,(也就是项目目录)自己新建一个gulpfile.js的js文件(创建好先放着不用动)

 

这个时候切换到命令行,还是在项目目录下运行cnpm install –save-dev gulp运行完这个命令到项目目录刷新一下是不是多了一个node_modules目录啊(哎呀好神奇啊)

现在已经完成了准备工作

你的是和我的一样吗之后关于吞的代码,都是写到gulpfile.js文件里

好了我们正式开始用写gulp部分的代码了,首先打开gulpfile.js输入var gulp = require(’gulp’); 这里是创建一个gulp对象,根据这个gulp对象开始操作的(不理解没关系),必须有这一步
首先我们讲gulp的第一个api gulp.task(); 看代码javascript代码

//这里是gulpfile.js文件
var gulp = require(‘gulp’);
//第一个API gulp.task();
gulp.task(‘default’, [‘task1’, ‘task2’], function () { //default是默认的的命令
console.log(‘我是difault默认命令’);
});
gulp.task(‘task1’, function () {
console.log(“我是task1”);
});
gulp.task(‘task2’, [‘task3’], function () {
console.log(“我是task2”);
});
gulp.task(‘task3’, function () {
console.log(“我是task3”);
});
/*
gulp.task()这个里面放三个参数,第一个参数是命令的名称(随便起的) 例如:上面的task1,我们在命令行里输入gulp task1 就会打印出我是task1字符串
当然我们可以给他命名为default,default是默认命令 ,在命令行中只输入gulp 后面不用跟命令名称自动 执行default命令
第二个参数是可选参数,类型是数组 表示当前命令依赖的哪些命令,看上面的代码defalut命令依赖 task1 和 task2 命令
第三个参数是执行的操作。(可以理解为命令的操作)
把上面的代码写好后,在命令行中输入 gulp 回车,会执行default命令,default命令会依赖 task1,和task2,命令
所以首先会执行task1命令,打印 “我是task1″, 然后执行task2命令,因为task2命令依赖task3命令所以会先执行task3,在执行task2. 这个时候才会执行到default命令
所以运行gulp 之后的打印顺序是
我是task1
我是task3
我是task2
我是default默认命令
* */

然后我们讲第二个api gulp.src() 还是看代码吧,上面的代码不用删除 然后在增加以下代码javascript 代码

gulp.task(‘copy’, function () {
gulp.src(‘./src/**/*’) //这里的**/*的意思是src下面的所有文件这样放到内存中类似input读取操作
.pipe(gulp.dest(‘./build/’)) //pipe方法相当于下一步 gulp.dest()相当于输出 output;
});
/*
这个时候在命令行中输入gulp copy 执行copy命令,是把src下面的所有的东西复制输出到build目录中刷新一下看看是不是build里面的和src里面的现在一模一样了
* */

第三个api 是gulp.watch(); gulp.watch是监控文件变化的javascript 代码

/*
* 第三个API gulp.watch();
* gulp.watch 监控文件变化,第一个参数显而易见是需要监控的文件;第一个第二个参数是可选。文件变化后执行的命令。第三个参数是回调函数
*
*/
gulp.task(‘watchfile’, function () {
gulp.watch(‘./src/index.html’, [‘task1′,’task2’],function(){})
})
/*
在命令行中输入gulp watchfile 会发现命令行没有前面的地址了。说明。命令行正在运行。一直在监控src下面的index.html文件
当我们修改index.html文件里面的内容的时候。保存一下。在命令行中会自动执行gulp的 task1 和task2命令 对不对,是不是十分神奇
* */

好想gulp的api已经说完了,对的没错 确实是说完了吧,下面我开始说一说gulp操作中常用到的一些插件

第一个 gulp中提供了一个 可以将less文件编译成css文件的一个插件 gulp-less ,需要用npm安装,

切换到我们的命令行,输入 cnpm install –save-dev gulp-less 回车 安装完毕 打开package.json 文件里面的devDependencies 对象里面是不是多了一个gulp-less 这个对象

devDependencies这个对象里面就是本项目目录里面用到的插件。到这一步是不是已经有两个了 一个gulp 一个gulp-less,言回正传切回到我们的gulpfile.js

我们在src目录下在新建一个less文件夹。在less 文件夹下 新建一个style.less文件 style.less里写上你的less代码。在gulpfile.js中增加以下代码javascript 代码

var less = require(‘gulp-less’); //建立一个gulp-less的对象
gulp.task(‘less’, function () {
gulp.src(‘src/less/*.less’) //选中less文件夹下的所有的.less文件
.pipe(less()) //less()函数,使less文件编译成css文件 .pipe()就相当于下一步 之前好像已经说过了 习惯就好了
.pipe(gulp.dest(‘src/css/’)) //用dest函数输出到css文件夹下
})
/*
在命令行中输入gulp less 命令 运行过后你发现是不是你的src下面的css文件里面多了一个css文件
是跟句less编译过来的。
* */

目前到这里是不是还是没什么难度的,讲完了less编译css下面在说一个css和js文件合并。用到的插件gulp-concat

首先先在项目目录中安装该插件 命令行中输入 cnpm install –save-dev gulp-concat (同样package.json文件里又多了一个gulp-concat插件)

我们在src/css 目录下新建两个.css文件分别写上一句css的代码(这个自己随便写了),

然后在gulpfile.js中增加代码html 代码

var concat = require(‘gulp-concat’);
gulp.task(‘concat’, function () {
gulp.src(‘./src/css/*.css’) //选中css目录下的所有的css文件合并成all.css文件
.pipe(concat(‘all.css’,{
newLine: ‘//这里是分割线’
})) //第二个参数newLine可选表示合并中间插入的内容
.pipe(gulp.dest(‘./src/css/’))
})
/*
命令行中输入gulp concat 运行concat命令。之后会发现src中的css目录是不是多了一个all.css
的文件里面的内容是两个css文件合并到一起的
*/

讲完了css和js合并用的插件。在说一个css文件压缩的插件。gulp-clean-css

首先安装该插件,我相信不用说大家也已经回安装了。命令行中输入

cnpm install –save-dev gulp-clean-css 安装完成后在gulpfile.js文件里增加html 代码

/*css文件压缩 用到的插件是 gulp-clean-css
* npm install –save-dev gulp-clean-css
* 这里我们借用concat命令的合并css的行为,合并完后进行压缩
* cleanCss()函数里面的参数可选 下面注释是兼容ie8 里面的参数可以查看npm官网中的 gulp-clean-css插件
*/
var cleanCss = require(‘gulp-clean-css’);
gulp.task(‘clean’, function () {
gulp.src(‘./src/css/*.css’)
.pipe(concat(‘style.css’))
.pipe(cleanCss()) //.pipe(cleanCss({compatibility: ‘ie8’}))
.pipe(gulp.dest(‘./src/css/’))
})
/*
命令行中输入gulp clean命令,运行完后发现style.css里面的代码是不是被压缩了
并且合并了别的所有的css文件的代码
* */

学到这是不是已经轻车熟路了,下面说一下js压缩用到的插件(js合并用的插件和css一样也是gulp-concat)

js压缩用到的插件是gulp-uglify 安装gulp-uglify插件 命令行中输入 cnpm install –save-dev gulp-gulify

在gulpfile.js文件中新增下面的代码javascript 代码

/* js 合并用的插件和css合并用的一样都是concat
* js 压缩用的插件是gulp-uglify
* 安装命令是
* npm install –save-dev gulp-uglify
*/
var uglify = require(‘gulp-uglify’);
gulp.task(‘js1’, function () {
gulp.src(‘src/js/*.js’) //这一步拿到src/js文件下 所有的.js文件
.pipe(concat(‘all.js’)) //合并到一期在all.js文件
.pipe(uglify()) //压缩js代码
.pipe(gulp.dest(‘src/js/’)) //最后输出到src/js文件中
});

命令行中输入gulp js1 运行上面的js1 命令 后是不是js文件夹里面多了一个all.js文件 并且合并了所有的js文件

说完css js 文件的合并和压缩 现在该轮到 图片压缩了吧 在我们前端项目中会用到很多图片。当项目上线后,有些图片会特别大

导致加载的时候会很慢,图片压缩会解决一点这些问题,是图片的大小变的不是那么大 嗯用到的插件是 gulp-imagemin

首先安装gulp-imagemin插件。命令行输入什么命令。 就是 cnpm install –save-dev gulp-imagemin

废话不多说直接上代码javascript 代码

var imagemin = require(‘gulp-imagemin’);
gulp.task(‘images’, function () {
gulp.src(‘./src/img/*.*’) //拿到img文件下的所有图片
.pipe(imagemin()) //进行图片压缩
.pipe(gulp.dest(‘./build/img/’)) //压缩完后输出到build文件中的img文件里
})
/*
* 当然首先在src/img/文件夹下放上几张图片 (格式最好是jpg,或者png的)
命令行中输入 gulp images 回车 命令运行完后对比一下build中的图片大小和
src中 的图片大小 是不是build中的比较小
* */

接下来是雪碧图(精灵图),用到的插件是gulp-css-spriter
安装命令同上,cnpm install –save-dev gulp -css-spriter目前该插件只支持.jpg .png文件类型的图片
在src img中放几张小点的图片。精灵图是把一些小的图片合并成一张图片。根据background-position进行定位从而减少了
浏览器读取图片的次数。提高了效率大概就是这样
首次放几张小的图片在src / img的文件夹里,然后在任意一个css文件里background url引入这些图片

这里是css中引入这些图片接下来看代码吧的JavaScript代码

/*雪碧图(精灵图):用到的插件 gulp-css-spriter
* 安装命令: npm install –save-dev gulp-css-spriter
* 引入对象
* 目前该插件只支持 .jpg .png文件的图片
*/
var spriter = require(‘gulp-css-spriter’);
gulp.task(‘spriter’, function () {
gulp.src(‘./src/css/*.css’)
.pipe(concat(‘all.css’)) //这里做了一下css的合并操作。上面提到过的
.pipe(spriter({
‘spriteSheet’:’./build/img/spritesheet.png’,//生成的路径,这里是精灵图生成的路径 和名称。根据自己的项目自定义
‘pathToSpriteSheetFromCSS’:’../img/spritesheet.png’//替换的路径 这里是把原来引入的背景图路径替换成这个
}))
.pipe(cleanCss()) //这里进行了压缩操作
.pipe(gulp.dest(‘./build/css/’)) //最后输出到了build下面的css文件夹里
});

在命令行中输入gulp spriter执行精灵图命令。执行完毕后。会在build /下面的img文件下生成一个名为spritesheet.png的大图,并且all.css文件已经给我们自动定位好了

背景图,只要html文件引入build /下面的all.css文件就好了

说一下html文件的压缩吧html文件压缩用到的插件是gulp-htmlmin
首先。对你没说错安装该插件cnpm install –save-dev
gulp -htmlmin 下面看代码吧
html代码

var htmlmin = require(‘gulp-htmlmin’);
gulp.task(‘htmlmin’, function () {
gulp.src(‘./src/*.html’)
.pipe(htmlmin({
collapseWhitespace: true
})) //进行压缩处理
.pipe(gulp.dest(‘./build/’))
});
/*
命令行中输入gulp htmlmin命令。 执行完后会把src下面的所有的html代码进行压缩。并且输出到了build文件夹下
htmlmin()函数里面的参数是什么意思呢 我也不知道。可以去npm上面查看 里面的参数代表的含义
* */

网站前端开发|gulp前端开发环境

https://www.rokub.com

» 本文来自:前端开发者 » 《gulp前端开发环境-零基础详细教程》
» 本文链接地址:https://www.rokub.com/2865.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!