等待安装完成后,查看是否正确安装,在命令行中执行gulp -v ,出现版本号即为正确安装。
- 选装 cnpm
说明:因为 npm 安装插件是从国外服务器下载,受网络影响大,可能出现异常,淘宝团队就弄了一个 cnpm :这是一个完整的 npmjs.org 镜像,你可以用此代替官方版本(只读)。同步频率目前为 10 分钟一次以保证尽量与官方服务同步。
官方网址:npm.taobao.org
安装:命令提示符执行 npm install cnpm --registry=https://registry.npm.taobao.org 注意:安装完后最好查看其版本好 cnpm -v 或关闭命令提示符重新打开,安装完直接使用可能会出现错误;
注:cnpm 跟 npm 用法完全一致,只是在执行命令时将 npm 改为 cnpm 。
在命令行中定位到当前工作目录,例如: D:\gulpdemo 中,作为项目的开发依赖安装:
npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp');
gulp.task('default',function(){
//将你的默认的任务代码放在这
console.log('Hello world');
});
运行gulp:
gulp
命令行中会输出 Hello world 。
gulp 的核心 API只有4个,分别是:
gulp.src
gulp.dest
gulp.task
gulp.watch
gulp 中的大多数功能都是用外部插件来实现的。gulp 中所有的插件点击这里
npm install gulp --save-dev
注: 1. -g:代表全局安装; 2. –save:将保存配置信息至package.json(此文件在 node_modules\gulp 目录下) 3. -dev:将它作为你的项目依赖添加到中devDependencies内(–save和-dev是2个东西,记得分清前面的”-“号) 4. 由于Gulp会自带package.json文件(用于存储项目的元数据),所以这里只做简单介绍(如果你想自己创建,也可通过命令 npm init,然后根据引导填写相关信息)
Gulp插件安装(Install Gulp Plugins)
接着安装我们所需要的插件,这里,我们通过 browser-sync 来实现页面自动刷新:
npm instal browser-sync --save-dev
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;
var watch = require('gulp-watch');
gulp.task('server',['sass'],function(){ //静态服务器+监听 scss/html文件
browserSync.init({
server: './'
});
gulp.watch('./sass/*.scss',['sass']);
gulp.watch('./*.html').on('change',reload);
gulp.watch('./**/*.css').on('change',reload);
});
//sass文件编译
//sass编译后的css注入到浏览器里实现更新
gulp.task('sass',function(){
return gulp.src('./sass/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('./css'))
.pipe(reload({stream: true}));
});
对象篇
模块化编程-自研模块加载器