前端自动化构建工具gulp的使用

1、安装nodejs

1.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;

1.2、安装:打开http://nodejs.org/,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意);

1.3 运行命令行,win+R,输入“cmd”,回车,输入“node -v”查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

2、安装nodejs的包管理器;

在命令行里输入          npm install cnpm -g --registry=https://registry.npm.taobao.org回车,安装完成

然后  输入npm -v查看npm的版本号;出现版本号,说明已正确安装npm;

3、全局安装gulp

3.1、说明:全局安装gulp目的是为了通过她执行gulp任务;

3.2、安装:命令提示符执行cnpm install gulp -g

3.3、查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

4、cd定位到目录,用法 cd + 路径;

5、命令行输入    cnpm init   然后一直回车,创建好了配置文件package.json;

6、本地安装gulp,命令行里输入 cnpm install gulp --save-dev

7、安装gulp插件

cnpm   install  gulp-concat     --save-dev把多个文件合并为一个文件

cnpm  install   gulp-uglify       --save-dev压缩javascript文件,减小文件大小

cnpm  install   gulp-rename    --save-dev      用来重命名文件

cnpm  install   gulp-minify-css  --save-dev    用来压缩css文件,减小文件大小

cnpm  install   gulp-sass        --save-dev      用来执行sass预编译的

cnpm  install   gulp-webserver   --save-dev   用来本地起服务,访问本地页面,实现全自动刷新;

8、装完插件之后,在目录文件下,新建gulpfile.js文件;

写入如下代码,先导入工具包,用哪个插件就require哪个插件;


前端自动化构建工具gulp的使用_第1张图片

然后创建gulp任务;



前端自动化构建工具gulp的使用_第2张图片

最后,在命令行里输入gulp copy指令,回车,看目录文件,盯着不要动,看着它静静的发生变化。

其中“copy”是起的任务名,自定义,function里边是要执行的方法;


更多用法移步:  gulp

你可能感兴趣的:(前端自动化构建工具gulp的使用)