前端开发总结之Gulp
前端比较流行的自动化工具有gulp和grunt,其中gulp的中文官网对gulp使用介绍非常详细了,本文只是为了记录个人搭建自动化工程的一个过程,做个备忘,以后查着方便。
-
node.js、cnpm安装
node中文官网:https://nodejs.org/zh-cn/ (可下载最新版本)
node版本查看: node -v
npm版本查看: npm -v
node安装之后会在系统用户目录AppData\Roaming目录下生成npm和npm-cache两个目录,这个两个是npm的全局安装目录(使用npm install -g安装的插件会安装在这个目录)和缓存目录
为了方便我们希望把npm的目录进行修改。在node的安装目录下创建两个文件夹,分别为node_global、node_cache用来替换自动生成的目录。
执行以下命令进行配置的修改
npm config set prefix "F:\tool_install\nodejs\node_global"
npm config set cache "F:\tool_install\nodejs\node_cache"
使用npm list -global 可以查看是否配置成功。
使用 npm config set registry=https://registry.npm.taobao.org 配置淘宝的镜像站。
使用npm config list 查看配置信息。这些配置信息记录在C:\Users\weiwei\.npmrc文件中。
在系统环境变量中增加NODE_PATH变量 ,路径为F:\tool_install\nodejs\node_global\node_modules,这样执行npm install就不会报错了。(记得创建node_modules目录)
使用npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm。此时cnpm是被安装在F:\tool_install\nodejs\node_global目录下的。在系统环境变量的path中配置下这个路径就可以使用cnpm了。
-
gulp安装
使用命令 cnpm install -g gulp 全局安装gulp插件。
在项目目录下,使用命令 cnpm install --save-dev gulp 在项目中安装gulp。(--save是发布之后还依赖的东西,比如jquery。--save-dev是开发依赖的东西。比如gulp)
在项目中安装gulp之后,会在项目目录下会生成node_modules目录和package.json文件,package.json中是项目的依赖。
-
编译脚本编写
创建gulpfile.js文件,在文件中编写任务脚本。
贴一个示例片段
var gulp = require('gulp');
gulp.task('dist', function() {
gulp.src('src/**').pipe(gulp.dest('dist/'));
});
gulp.task('default',['dist']);
在项目根目录,执行gulp即可执行默认任务。
如果使用的IDE是webstorm的话,右键gulpfile.js,有一个show gulp tasks菜单,点击之后会出现gulp工具栏,可以进行gulp的操作。
具体的脚本编译语法就不在此一一详解了,官网API非常详细。