gulp 入门初步(1),大厂直通车

69 阅读3分钟

gulp 中文网

gulp 是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

下面我们开始 gulp 的使用。

首先,你得安装 Node.js

然后打开命令行,安装全局 gulp

npm install gulp -g

等待安装完成后,查看是否正确安装,在命令行中执行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

English API docs

中文API文档

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: './'

});

web浏览器中的javascript

  • 客户端javascript
  • 在html里嵌入javascript
  • javascript程序的执行
  • 兼容性和互用性
  • 可访问性
  • 安全性
  • 客户端框架

window对象

  • 计时器

  • 浏览器定位和导航

  • 浏览历史

  • 浏览器和屏幕信息

  • 对话框

  • 错误处理

  • 作为window对象属性的文档元素

开源分享:docs.qq.com/doc/DSmRnRG…