【gulp】Gulp的安装和配置 及 系列插件

注意：要安装俩次gulp（全局和本地）：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

之前由大牛帮忙配置的gulp来用。今天时间充裕，就和小伙伴一起动手配置gulp及其插件。

前提：已安装nodejs——npm  （备注教程  “物理安装”）

第一步：建了一个Gulp文件夹，保存插件用于使用
第二步：进入nodejs环境下安装cnpm淘宝镜像文件（若npm install 时报错，形如 npm ERR！Windows_NT XXX ，则将之前存在的.npmrc删掉再安装该镜像文件）

             npm install -g cnpm --registry=https://registry.npm.taobao.org

             （以上解决后）
第三步：配置环境变量，安装npm

            ①环境变量的配置(    PATH量以   ;    往后添加    )：

            NODE_PATH项：C:\Users\Administrator\AppData\Roaming\npm\node_modules

            PATH项：C:\Users\Administrator\AppData\Roaming\npm;C:\Users\Administrator\AppData\Local\atom\bin

   

第四步：开始安装gulp      （查看gulp是否安装成功：gulp-v）

             ①安装全局gulp          cnpm install gulp -g          

             ②安装本地gulp        

              进入项目文件gulp中输入命令：

                                 cnpm install --save-dev              （生成node-modules、package.json等配置文件）

                                 cnpm install gulp  --save-dev       （生成gulpfile.js）

             安装成功显示

 

            <另：

                 npm install （能自动生成package.json配置文件）

                 cnpm init    （手动配置package.json）

             >

 

第五步：在项目文件gulp中安装依赖插件如：   gulp-px2rem-plugin           /gulp-uglify     等

              安装命令如下：npm install gulp-px2rem-plugin --save-dev

                                      cnpm install gulp-uglify --save-dev  

                                     等

              调用（gulpfile.js中）：

                                    var gulp = require('gulp');

                                    var px2rem = require('gulp-px2rem-plugin');     (px2rem具体配置）

                                   //配合其他插件使用 如：

                                    var minifycss = require('gulp-minify-css');     //压缩 css 等

                                    var spritesmith=require('gulp.spritesmith');    //雪碧图

 

 

更详细的资料参照：http://www.ydcss.com/archives/18  系列

（包含nodej，npm，gulp安装以及多种方法）

 

创建项目参考 https://www.jianshu.com/p/df646aa2b384