2.3 gulp--js 命令行构建工具 2
2.3.1 安装 gulp
npm 是 node 的包管理工具, 可以利用它安装 gulp 所需的包.(在安装 node 时已经自动安装了 npm). 在命令行输入
npm install -g gulp
若一直没安装成功, 请使用 cnpm 安装 (npm 的国内加速镜像), 意思是: 使用 npm 安装全局性的 (-g) gulp 包.
如果你安装失败, 请输入 sudo npm install -g gulp 使用管理员权限安装.(可能会要求输入密码).
安装时请注意命令行的提示信息, 安装完成后可在命令行输入 gulp -v 以确认安装成功.
2.3.2 新建 package.json 文件
1, 说明: package.json 是基于 nodejs 项目必不可少的配置文件, 它是存放在项目根目录的普通 json 文件;
2, 它是这样一个 json 文件 (注意: json 文件内是不能写注释的, 复制下列内容请删除注释):
- {
- "name": "test", // 项目名称 (必须)
- "version": "1.0.0", // 项目版本 (必须)
- "description": "This is for study gulp project !", // 项目描述 (必须)
- "homepage": "", // 项目主页"repository": { // 项目资源库"type":"git","url":"https://git.oschina.net/xxxx"},"author": { // 项目作者信息"name":"surging","email":"surging2@qq.com"},"license":"ISC", // 项目许可协议"devDependencies": { // 项目依赖的插件"gulp":"^3.8.11","gulp-less":"^3.0.0"
- }
- }
3, 当然我们可以手动新建这个配置文件, 但是作为一名有志青年, 我们应该使用更为效率的方法: 命令提示符执行 cnpm init
4, 查看 package.json 帮助文档, 命令提示符执行 cnpm help package.json
特别注意: package.json 是一个普通 json 文件, 所以不能添加任何注释. 参看 http://www.zhihu.com/question/23004511
2.3.3 7, 本地安装 gulp 插件
1, 安装: 定位目录命令后提示符执行 cnpm install --save-dev;
2, 本示例以 gulp-less 为例 (编译 less 文件), 命令提示符执行 cnpm install gulp-less --save-dev;
3, 将会安装在 node_modules 的 gulp-less 目录下, 该目录下有一个 gulp-less 的使用帮助文档 README.md;
4, 为了能正常使用, 我们还得本地安装 gulp:cnpm install
gulp --save-dev;
PS: 细心的你可能会发现, 我们全局安装了 gulp, 项目也安装了 gulp, 全局安装 gulp 是为了执行 gulp 任务, 本地安装 gulp 则是为了调用 gulp 插件的功能.
2.3.4 新建 gulpfile.js 文件 (重要)
1, 说明: gulpfile.js 是 gulp 项目的配置文件, 是位于项目根目录的普通 js 文件 (其实将 gulpfile.js 放入其他文件夹下亦可).
2, 它大概是这样一个 js 文件 (更多插件配置请查看这里 http://www.ydCSS.com/archives/tag/gulp ):
- // 导入工具包 require('node_modules 里对应模块')
- var gulp = require('gulp'), // 本地安装 gulp 所用到的地方
- less = require('gulp-less');
- // 定义一个 testLess 任务 (自定义任务名称)
- gulp.task('testLess', function () {
- gulp.src('src/less/index.less') // 该任务针对的文件
- .pipe(less()) // 该任务调用的模块
- .pipe(gulp.dest('src/css')); // 将会在 src/css 下生成 index.css
- });
- gulp.task('default', ['testLess', 'elseTask']); // 定义默认任务 elseTask 为其他任务, 该示例没有定义 elseTask 任务
- //gulp.task(name[, deps], fn) 定义任务 name: 任务名称 deps: 依赖任务名称 fn: 回调函数
- //gulp.src(globs[, options]) 执行任务处理的文件 globs: 处理的文件路径 (字符串或者字符串数组)
- //gulp.dest(path[, options]) 处理完后文件生成路径
3, 该示例文件请下载查看 http://static.ydcss.com/uploads/2015/03/gulp.rar
2.3.5 运行 gulp
1, 说明: 命令提示符执行 gulp 任务名称;
2, 编译 less: 命令提示符执行 gulp testLess;
3, 当执行 gulp default 或 gulp 将会调用 default 任务里的所有任务 ['testLess','elseTask'].
2.3.6 使用 webstorm 运行 gulp 任务
1, 说明: 使用 webstorm 可视化运行 gulp 任务;
2, 使用方法: 将项目导入 webstorm, 右键 gulpfile.js 选择 "Show Gulp Tasks" 打开 Gulp 窗口, 若出现 "No task found", 选择右键 "Reloadtasks", 双击运行即可.
2.3.7 总结
1, 安装 nodejs;
2, 新建 package.json 文件;
3, 全局和本地安装 gulp;
4, 安装 gulp 插件;
5, 新建 gulpfile.js 文件;
6, 通过命令提示符运行 gulp 任务.
2.3.8 参考链接
gulp 详细入门教程
http://www.ydcss.com/archives/18#lesson10
Gulp 入门指南 : 安装 Node 和 gulp
http://www.th7.cn/system/mac/201505/104211.shtml
来源: http://www.jianshu.com/p/da18a5bcc4be