【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:UsersAdministratorAppDataRoaming pm ode_modules
            PATH项:C:UsersAdministratorAppDataRoaming pm;C:UsersAdministratorAppDataLocalatomin
PATH环境变量
   
第四步:开始安装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.cnblogs.com/smilexumu/p/7066912.html