前端开发总结之gulp

                                           前端开发总结之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非常详细。