使用gulp进行快速开发

前言

本文主要分为以下几部分来讲。

less及sass的使用

1. 插件的安装

• 环境配置
• gulpfile.js
• 使用方法

同步自动刷新

1. 插件安装

• gulpfile.js
• 使用方法

疑问

less及sass的使用

插件的安装

1. 首先我们需要先安装node.js,傻瓜式安装，这里就不详细介绍。

• 安装完成后，打开node.js，安装淘宝镜像，以提高安装的成功率。
  <code>$ npm install -g cnpm --registry=https://registry.npm.taobao.org</code>
  安装完淘宝镜像之后就可以使用cnpm进行安装了。
• 安装gulp
  $ cnpm install gulp -g
• 安装less
  $ cnpm install gulp-less -g
• 安装gulp-connect
  $ cnpm install gulp-connect -g
• 安装sass
  $ cnpm install gulp-sass -g

请确保你所有的插件都安装成功

环境配置

在用户变量中新建一个用户名为 node_path 的用户。
其值为插件的地址（例如我的是C:\Users\Administrator\AppData\Roaming\npm\node_modules）（一般情况下，地址都大致相同）

注意
一般在我们的电脑中AppData默认是隐藏的，所以你需要的文件夹中显示隐藏文件
打开文件夹>工具>文件夹选项>显示隐藏的文件、文件夹和驱动器>确定
（这里写的是win7的方法）

gulpfile.js

新建一个名为gulpfile.js的文件，并把下面的代码拷贝到文件里面，然后保存。

var gulp = require('gulp');//加载gulp工具
var less = require('gulp-less');//加载LESS插件
var sass = require('gulp-sass');//加载SESS插件
var connect = require('gulp-connect');//启动一个服务器

//使用connect启动一个www服务器
gulp.task('connect', function () {
  connect.server({
    root: 'www',
    port: 9999,
    livereload: true
  });
});

// Styles
gulp.task('less', function() {
    //编译less
    return gulp.src('./www/css/*.less')
    .pipe(less())
    //保存未压缩文件到我们指定的目录下面
    .pipe(gulp.dest('./www/css'))
    .pipe(connect.reload())
});

// Styles
gulp.task('sass', function() {
    //编译sass
    return gulp.src('./www/css/*.scss')
    .pipe(sass())
    //保存未压缩文件到我们指定的目录下面
    .pipe(gulp.dest('./www/css'))
    .pipe(connect.reload())
});



gulp.task('html', function () {
  gulp.src('./www/*.html')
    .pipe(connect.reload());
});

//watch监听
gulp.task('watch', function () {
  gulp.watch(['./www/*.html','./www/css/*.less','./www/css/*.scss'], ['less','html','sass']);
});


gulp.task('default', ['connect', 'watch']);

使用方法

创建项目

1. 创建一个文件夹。（例如我创建了一个名为yimi的文件夹）

• 在文件夹里面创建一个名为“www”的文件夹，用于存放你的项目，并将我们刚刚书写的gulpfile.js复制一份进来。

  
  

• www里边存放我项目的文件（首页名称必须为index.html，并且存放在根目录下）。

  
  

sass的使用

这里列举sass的使用方法来介绍。

• sass有两种格式，一种为sass、一种是scss。（此处使用的是scss）

• 在css文件夹中新建一个名为style.scss的文件，这就是你的scss文件了。

  
  
• index.html引用scss的方法

只需像引入css文件一样引入即可
<link rel="stylesheet" type="text/css" href="css/style.css" />

• sass语法

gulp的使用

1. 打开node.js

• 进入文件夹地址
  cd+空格+文件夹地址
  例如（cd C:\Users\Administrator\Desktop\yimi）

• gulp

  
  
• 你的style.scss将会被编译成style.css，这时候可以发现你的css文件夹中多了一个style.css的文件。
• 在浏览器地址栏中输入http://localhost:9999/就可以访问你的网站了。

同步自动刷新

这是一个特别好用的插件，在你的代码书写完成之后，按下保存的同时，可以让你的浏览器自动刷新。

插件安装

请安装完上面的插件，再安装下面的插件。

1. 打开node.js

• 安装同步工具
  $ npm install -g browser-sync
• 安装gulp-autoprefixe
  $ npm install --save-dev gulp-autoprefixer

gulpfile.js

新建一个名为gulpfile.js的文件，并把下面的代码拷贝到文件里面，然后保存。(此处的gulpfile.js与上面不同，这里只使用sass，不支持less，可根据需要进行修改)

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'),//加载gulp工具
    sass = require('gulp-sass'),//加载SASS插件
    //connect = require('gulp-connect'),//启动一个服务器
    autoprefixer = require('gulp-autoprefixer');
    browserSync = require('browser-sync').create();
    reload = browserSync.reload;

//定义一个testLess任务（自定义任务名称）

//使用connect启动一个Web服务器
/*
gulp.task('connect', function () {
  connect.server({
    root: 'www',
    port: 7777,
    livereload: true
  });
});
*/
// Styles
gulp.task('sass', function() {
  //编译scss
    return gulp.src('./www/css/*.scss')//该任务针对的文件
    .pipe(sass())//该任务调用的模块
    //保存未压缩文件到我们指定的目录下面
    .pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
    .pipe(gulp.dest('./www/css'))//将会在./www/css下生成index.css
    //.pipe(connect.reload())
    .pipe(reload({stream: true}));

});

gulp.task('autoprefixer',function(){
  gulp.src('./www/css/*.css')
    .pipe(autoprefixer({
      browsers: ['>1%'],
      cascade: false,  //是否美化属性值 默认：true 像这样：
      //-webkit-transform: rotate(45deg);
      //        transform: rotate(45deg);
      remove: false  //是否去掉不必要的前缀 默认：true 
    }))
    .pipe(gulp.dest('./www/css'))
    // .pipe(connect.reload())
});
/*
gulp-autoprefixer的browsers参数详解：
    last 2 versions: 主流浏览器的最新两个版本
    last 1 Chrome versions: 谷歌浏览器的最新版本
    last 2 Explorer versions: IE的最新两个版本
    last 3 Safari versions: 苹果浏览器最新三个版本
    Firefox >= 20: 火狐浏览器的版本大于或等于20
    iOS 7: IOS7版本
    Firefox ESR: 最新ESR版本的火狐
    > 5%: 全球统计有超过5%的使用率
各浏览器的标识：
    Android for Android WebView.
    BlackBerry or bb for Blackberry browser.
    Chrome for Google Chrome.
    Firefox or ff for Mozilla Firefox.
    Explorer or ie for Internet Explorer.
    iOS or ios_saf for iOS Safari.
    Opera for Opera.
    Safari for desktop Safari.
    OperaMobile or op_mob for Opera Mobile.
    OperaMini or op_mini for Opera Mini.
    ChromeAndroid or and_chr
    FirefoxAndroid or and_ff for Firefox for Android.
    ExplorerMobile or ie_mob for Internet Explorer Mobile.
*/


gulp.task('browser-sync',['sass'],function(){

  browserSync.init({
      //代理
      //proxy: "localhost:7777"
      //静态服务器
      
      server:{
        baseDir:"./www"
      }
      
  });
  

  gulp.watch(['./www/css/*.scss'],['sass']);
  gulp.watch(['./www/*.html','./www/js/*.js']).on('change',reload);
});


gulp.task('default', ['browser-sync']);//定义默认任务

//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

使用方法

创建项目，sass的使用与上面的步骤相同，请参考上面的方法。

gulp的使用

1. 打开node.js

• 进入文件夹地址
  cd+空格+文件夹地址
  例如（cd C:\Users\Administrator\Desktop\yimi）

• gulp

  
  
• 你的style.scss将会被编译成style.css，这时候可以发现你的css文件夹中多了一个style.css的文件。
• 这时候你网页就会被自动打开。
• 当你保存你的代码的时候，你的网页就会被自动刷新。

移动端访问方法

1. 使用电脑打开一个wifi，用你的手机链接电脑的wifi

• 打开手机浏览器访问
  你的无线ip:3000

无线ip查看方法
win+R>输入cmd>回车>在命令行中输入ipconfig>无线局域网适配器> IPv4 地址
例如：192.168.191.1:3000

疑问

在步骤结束之后偶尔会出现下面这种情况，表示至今还不知道如何解决这个问题，希望知道方法的大神们留下您的高见，万分感谢！！！