星空网 > 软件开发 > Java

Gulp入门指南

安装Gulp.js


Gulp是给予Node.js的,故首先安装Node.js[1],完成之后执行下面的命令安装Gulp:
 
 
npm install -g gulp//-g (global)执行全局安装gulp,这样在任何地方都可以进行 gulp 操作


安装完成之后,需要在我们的项目中使用,需要命令行切换到项目更目录(可以 右键 点击项目目录选择 在此处打开命令窗口(W))然后执行下面的命令:
    
 gulp init 
// 生成一个package.json,里面是一些常规的配置信息


如图所示,会需要设置一些name,version等属性,一般一直按回车确认即可
     Gulp入门指南Gulp入门指南
完成之后在项目更目录下多了一个package.json的文件,内容如下:
Gulp入门指南
 npm install gulp --save-dev   //将gulp安装到项目目录中,bing生成依赖信息于package.js内的 devDependencies

Gulp入门指南



 
安装Gulp插件
Gulp的任务都是以插件[2]的形式存在,所以在使用前,需要先安装我们用到的插件到项目目录内,插件的安装命令:
 
    
 npm install 插件名 --save-dev//多个插件可以用空格分隔 npm install gulp-util gulp-uglify gulp-concat --save-dev//安装 gulp-util gulp-uglify gulp-concat 插件//gulp-uglify:用于压缩js//gulp-concat : 用于合并文件

 




创建配置文件gulpfile.js
要使用Gulp还需要进行相关的配置,把我们的插件载入进去:
在项目的更目录内创建一个gulpfile.js文件(必须是这个文件名),
举个例子(安装一个压缩html的插件)
     
npm install gulp-htmlmin --save-dev   //安装html压缩的插件


配置内容如下:
     
var gulp = require('gulp');   var htmlmin = require('gulp-htmlmin');   //创建一个任务   gulp.task('minify',function(){     gulp.src('src/*.html')         .pipe(htmlmin({collapseWhitespace:true}))         .pipe(gulp.dest('dist'))   });

 


在该目录下的控制台中键入:
     
gulp minify  //执行压缩html的任务


Gulp入门指南
查看项目中目录:
Gulp入门指南
Gulp入门指南
自动生成了一个dist文件夹,并且里面有一个index.html文件
Gulp入门指南
 Gulp入门指南
其他插件也是同样的方式进行配置,赶紧上手去试试吧,是不是觉得 so easy呢?
 
[1]:https://nodejs.org/en/download/
[2]:https://www.npmjs.com/  里面有海量的插件库



原标题:Gulp入门指南

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

突破0销量!旺季如何精准狠推新品?这几点很重要:https://www.ikjzd.com/articles/130835
官宣!2020年亚马逊Prime Day将于10月13-14日开启:https://www.ikjzd.com/articles/130840
亚马逊上的这些小标识,你都了解么?:https://www.ikjzd.com/articles/130841
亚马逊运营9个免费压箱底工具:https://www.ikjzd.com/articles/130842
10个实用跨境电商运营工具:https://www.ikjzd.com/articles/130843
谷歌指南:什么样的页面才是高质量的?:https://www.ikjzd.com/articles/130844
活动回顾 | 千亚麦佳携手MoonSees呈现精彩亚马逊运营管理课程:https://www.kjdsnews.com/a/1836386.html
生日景点免费 上海景点生日免费景点:https://www.vstour.cn/a/363173.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流