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 暂无