gulp前端自动化环境搭建详解

 

1、安装 nodejs

   Grunt和所有grunt插件都是基于nodejs来运行的， https://nodejs.org/

   安装完成之后在终端 node -v 查看安装版本  npm -v 查看npm版本

   

   选装cnpm

1.1、说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常， 如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网： “这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为  10分钟 一次以保证尽量与官方服务同步。”；

1.2、官方网址：http://npm.taobao.org；

1.3安装：命令提示符执行npm install cnpm -g  --registry=https://registry.npm.taobao.org；  注意：安装完后最好查看其版本号 cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm 代替npm）。

 

2、全局安装gulp

   安装方式：cnpm install gulp -g   

   执行gulp -v查看安装版本  

   

 

 

3、创建网站项目

   

 

   创建项目名称“gulp”子目录为：src（源文件）dist（目标文件）gulpfile.js(gulp任务配置文件) package.json（开发依赖项）

   package.json 基础文件编写

   

 

 

4、给项目安装gulp

   安装方式：cnpm install gulp -save-dev 回车（注意package.json文件内容变化）

   

 

   项目文件“gulp”下回自动生成node_modules文件夹，这里就是存储gulp源文件的地方。

 

5、gulpfile.js 基础文件编写

    

 

 

6、gulp插件的安装

   6.1、安装css插件gulp-sass（编译scss文件成css文件）

        安装方式：cnpm install gulp-sass --save-dev

        任务配置信息如下：

   

 

 

   6.2、安装css插件 gulp-autoprefixer（为css文件添加浏览器前缀 例如：-webkit-）

安装方式：cnpm install gulp-autoprefixer --save-dev

任务配置信息如上：

   

   6.3、安装css插件 gulp-clean-css （压缩css文件）

        安装方式：cnpm install gulp-clean-css --save-dev

        任务配置信息如下：

 

 

 

   6.4、安装插件 gulp-rename （重命名文件）

        安装方式：cnpm install gulp-rename --save-dev

        任务配置信息如上：

   

   6.5、安装html插件 gulp-file-include （外部引入html文件）

        安装方式： cnpm install gulp-file-include --save-dev

        任务配置信息如下：

 

 

 

   6.6、安装插件 browser-sync （监控文件有改动页面随之变动）

        安装方式：cnpm install browser-sync --save-dev

        任务配置信息如下：

 

 

 

7、如上所示，“watch”任务中所执行的任务为，当编写程序过程中按下ctrl+s保存之后所执行的任务

   7.1、如果文件变动保存，则执行任务

 

   7.2、如果文件变动保存，则执行任务

 

   7.3、如果所监控的文件有所改动执行相应的任务之后，在重新加载中的html文件，使之页面变动。

 

 

gulpfile.js文件全貌

 

package.json文件全貌