使用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" />

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

疑问

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Gulp和Webpack的差异
    在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,659评论 1赞 32
  • gulp
    安装Gulp首先需要安装Node.js，并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 1,023评论 0赞 1
  • mean开发系列工具篇之gulp
    前言 本文默认你已经安装好node环境，并且熟悉node命令，和window cd命令。 gulp简介 基于nod...
    9I阅读 2,041评论 4赞 50
  • 给初学者的Gulp教程（译）
    原文标题：Gulp for Beginners作者： Zell Liew翻译：治电小白菜原文地址：https://...
    ZZES_ZCDC阅读 1,721评论 6赞 18
  • Gulp学习
    参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,669评论 1赞 17

友情链接更多精彩内容