文档章节

使用gulp构建前端(一)

年少爱追梦
 年少爱追梦
发布于 2016/07/07 09:44
字数 532
阅读 109
收藏 0

                                                       使用gulp构建前端(一)

  前端页面越来越多的时候,如何管理其实也是一个非常重要的东西,less文件编译成css文件不一定要借助编译软件,在打包的时候如何对css文件/js文件,进行压缩。其实满足上面三点的软件还是有点多的,但是使用比较简单的gulp就是其中的佼佼者。

   话不多说,使用gulp使用的是npm进行管理,所以我们需要去node.js官网去安装,windows下基本是傻瓜式的安装,就不做任何提醒,不过npm随着node.js安装就自动生成了。(查看 node  -v ,npm -v)。

    安装了npm过后,就开始安装gulp的插件,由于我们需要全局使用gulp的时候,就需要全局安装:

npm install gulp -g

  建立一些开发目录:

mkdir project

cd project

mkdir site

cd site

 使用npm init建立package.json(有提示输入)

{
  "name": "chen",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "chen",
  "license": "ISC",
}

 本地安装gulp进行编译依赖(全局安装和本地安装区别是只能在这使用,而且要加入依赖)

-D, --save-dev 安装包信息将加入到devDependencies(开发阶段的依赖),所以开发阶段一般使用它
npm install gulp --save-dev 或 npm install gulp -D

此时package.json如下:

{
  "name": "chen",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "chen",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
  }
}

在相同目录下建立一个gulpfile.js并开始写一些测试代码:

var gulp = require('gulp'); //本地安装gulp所用到的地方
//入口任务   
gulp.task('default', function(){
   console.log("start");

}
);

执行命令 gulp 查看结构,如果控制台没有报错,并显示start那么则环境搭建成功。

关于npm命令总结的比较好的网站:http://www.jb51.net/article/86253.htm

gulp的一些好网站:http://www.gulpjs.com.cn/docs/api/(gulp中文网)

http://www.ydcss.com/archives/18(有gulp英文网翻译,还有一些插件的例子)

查看gulp的一些插件的使用在github上面 查询 gulp-*就可以看到了。

 

© 著作权归作者所有

年少爱追梦
粉丝 35
博文 190
码字总数 119538
作品 0
杭州
程序员
私信 提问
使用gulp构建前端(二)

使用gulp构建前端(二) 在使用gulp构建前端(一)文章中已经搭建了整个gulp的使用环境,现在我们来开始使用一些简单的插件的进行整个项目的编译过程。 插件一 使用gulp-imagemin压缩图片文件...

年少爱追梦
2016/07/07
31
0
gulp搭建起步及前端脚手架--sass篇-详解

gulp gulp 简介 gulp 是一个前端自动构建工具 下面我来带大家一起搭建一个前端脚手架: 一、安装 全局安装 ps: 安装成功之后执行 gulp -v查看版本号 二、创建项目 新建一个空的文件夹来存放 ...

周瑾ruiqi
2018/05/16
0
0
nodejs+gulp+webpack基础知识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/English0523/article/details/100009783 知识点涉及怎么结合gulp、w...

天府云创
08/22
0
0
前端自动化构建工具库之gulp

这是一款基于nodejs的前端自动化构建工具--gulp,以下是使用gulp的步骤: 1.安装主程序,在需要编译的目录输入 2.安装常用插件 3.配置gulpfile.js,如果工作目录下没有该文件,请新建gulpfil...

w-rain
2016/05/20
79
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
2018/01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部