Win7下 gulp搭建 + gulp实时监测demo

gulp安装搭建

1.1、安装gulp条件：

node + npm（或 cnpm）

2.1、全局安装gulp（以此执行gulp任务）

2.1.1、打开dos命令行，执行命令：cnpm install gulp（注：此命令不能带 -g）

2.1.2、查看是否安装成功，执行命令：gulp –v（注：出现版本号即为安装成功）

2.2、创建package.json

（注：package.json不可添加注释）

定位至项目根目录，初始化创建package.json，执行命令：cnpm init

*3个必填项：name, version, description

*1个入口文件：如：gulpfile.js（任意名称.js）

2.3、安装当前项目gulp （以此调用gulp插件）

执行命令：cnpm install gulp --save-dev  （--save-dev 此参数表示添加依赖关系）

2.4、当前项目安装gulp插件 （以gulp-less为示例：）

执行命令：cnpm install gulp-less --save-dev

3.1、创建gulp入口文件 gulpfile.js

gulpfile.js demo:

若更改了gulpfile.js文件， 则要重新执行default模块，否则gulpfile.js文件的更改不会执行！！

var gulp = require('gulp');


//默认执行任务
gulp.task('default', function() {
    gulp.start('task1' /* , taskn*/);
});
gulp.task('default', ['task1' /* , taskn*/]);


//同步css到与父级同级的xxx、yyy目录下
gulp.task('cssSync', function() {
    return gulp.src('css/*')
        .pipe(gulp.dest('../xxx/css'))
        .pipe(gulp.dest('../yyy/css'));
});


//实时监测css变动
gulp.task('watch', function() {
    gulp.watch(['css/*'], ['cssSync']);
});

4.1、运行gulp

4.1.1、命令行运行

dos命令跳至gulpfile.js目录下（通常是项目的根目录）；

执行命令：gulp [任务名称] （缺省任务名称—默认执行default任务）

*其他项目的gulp执行结果截图，仅表示命令行执行gulp运行结果如何：

4.1.2、webstorm图形界面运行

*其他项目的gulp图形界面执行流程截图，仅表示图形界面执行gulp运行流程：

成功执行结果：

总结：

代码目录示例：

npm介绍：

npm安装插件，执行命令：npm install <name> [-g] [--save-dev]

<name>   node插件名称

[-g]      全局安装：C:Users/Administrator/AppData/Roaming/npm

             写入系统环境变量

             通过命令行在任何地方调用

         本地安装：当前定位目录/node_modules/

             通过require() 调用

--save    将配置信息保存至package.json（nodejs项目配置文件）

（*为什么要将配置信息保存至package.json？）node插件包非常庞大，不加入版本管理，将配置信息写入package.json并加入版本管理，其他开发者对应下载即可（执行命令： npm install，会根据package.json下载所有插件）

-dev      将配置信息保存至package.json的devDependencies节点，不写则默认保存至dependencies节点