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

 

1、安装 nodejs

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

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

   

   选装cnpm

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

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

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

 注：cnpm跟npm用法彻底一致，只是在执行命令时将npm改成cnpm（如下操做将以cnpm 代替npm）。

 

二、全局安装gulp

   安装方式：cnpm install gulp -g   

   执行gulp -v查看安装版本  

   

 

 

三、建立网站项目

   

 

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

   package.json 基础文件编写

   

 

 

四、给项目安装gulp

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

   

 

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

 

五、gulpfile.js 基础文件编写

    

 

 

六、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

        任务配置信息以下：

 

 

 

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

   7.1、若是文件变更保存，则执行任务

 

   7.2、若是文件变更保存，则执行任务

 

   7.3、若是所监控的文件有所改动执行相应的任务以后，在从新加载中的html文件，使之页面变更。

 

 

gulpfile.js文件全貌

 

package.json文件全貌