gulp使用技巧

gulp

一、在node环境下配置gulp

命令	解释
npm install gulp -g	全局安装gulp
npm install –global gulp	全局安装gulp
npm install gulp –save-dev	本地安装gulp插件
npm install –save-dev gulp	本地安装gulp插件

npm install <name> [-g] [--save-dev]
<name>：node插件名称。例：npm install gulp-less --save-dev

• -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
• --save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
• -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等

注意：通过全局安装gulp插件，直接通过require()的方式是没有办法调用全局安装的gulp插件的。全局的安装是供命令行使用的，就好像全局安装了gulp后，就可以在命令行中直接运行gulp命令
全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。这里一定要注意区分全局安装和本地依赖安装

二、npm命令

命令	解释
npm uninstall [-g] [–save-dev]	使用npm卸载插件(不要直接删除本地插件包)
npm uninstall gulp-less gulp-uglify gulp-concat	删除全部插件
npm update [-g] [–save-dev]	使用npm更新插件
npm update [–save-dev]	更新全部插件
npm root	查看当前包的安装路径
npm remove	移除
npm root -g	查看全局模块的安装目录
npm help	查看npm帮助
npm list	当前目录已安装插件

借助rimraf：npm install rimraf -g 用法：rimraf node_modules

常用的npm命令列表看这里常用的npm命令列表

三、使用淘宝镜像

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

四、如何新建一个gulp任务

• 一、 全局安装 gulp$ npm install --global gulp
• 二、CMD进入到当前文件夹
• 三、npm初始化执行命令npm init 会创建一个json文件
• 四、本地安装，安装依赖 npm install gulp --save-dev(或npm install --save-dev gulp)
• 五、 在项目根目录下创建一个名为 gulpfile.js 的文件
• 六、使用gulp，仅需知道4个API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch(),gulp.pipe()

五、一些常用的gulp插件

插件	作用
gulp-uglify-js	js压缩
gulp-concat-js	js合并
gulp-less	转义lee为css
gulp-sass	转义sass为css
gulp-autoprefixer	自动添加css前缀
gulp-clean-css	压缩css
gulp-minify-css	压缩css
gulp-jshint	js代码校验
gulp-imagemin	压缩图片
gulp-livereload	自动刷新页面，谷歌浏览器需安装livereload插件
browser-sync	自动刷新页面
gulp-rename	重命名
gulp-cache	图片缓存，只有图片替换了才压缩
gulp-notify	更改提醒
gulp-rect	转换jsx为普通js文件
gulp-babel	ES6转义成ES5
gulp–preset-es2015	ES6转义成ES5，不需要显示调用
browserify	模块化插件
gulp-browserify	模块化插件
gulp-jasmine	暂无
gulp-mocha	暂无