nodejs+gulp+webpack+sass基础篇
学习笔记666
这个作者很懒,什么都没留下…
展开
-
实战演练:用gulp像CMS那样生成新闻页面
先学习一个nodejs库npm install request --save-dev有了这个库,我们可以在nodejs里面很方便的实现类似curl功能。1.先来试一下这个request,写一个1.js,代码如下:var request = require('request');request.get('http://localhost/myphp/news.php',function(error,原创 2016-08-15 21:49:51 · 658 阅读 · 0 评论 -
粗糙的玩一玩javascript的"编译"(1)
我们的浏览器能加载之前我们写的js?新建个html,来试验一下:<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"></head><body><script src="index.js"></script></body></html> 控制台报了:ReferenceError: requi原创 2016-08-10 21:02:04 · 481 阅读 · 0 评论 -
粗糙的玩一玩javascript的"编译"(2)css也能"编译"?
1.在项目根目录下新建一个css.css*{color:red;}2.html引用<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css.css"></head><body><h1>hello原创 2016-08-10 22:11:42 · 479 阅读 · 0 评论 -
sass实战演练02 - 嵌套、mixin、变量计算、颜色函数
上一节我们已经做到 这节课我们的需求一 让所有的container内部的div内部的元素居中 今天的知识点mixin 这是一个很有用的代码片段标记,就好像定义了函数一样(只是好像) @mixin text-center() { text-align:center; } 引用时就可以用 @include text-center 第二个需求 第一个h1字体大小48px,字体原创 2016-09-01 21:02:38 · 964 阅读 · 0 评论 -
利用gulp自动完成配置"吐"给webpack执行
webpack的入口 理论上我们对那些文件”需要成为入口文件“都要有一个基本的规则,目前我们零散的把我们的文件统统放到了src下面, 我们先整理一下 同时,这些js理,引入的css路径也要修改require('./../../css/index.css');1.下面我们要来试验如何用gulp来读取webpack的配置文件? 先把webpack.config.js的入口为空// entry原创 2016-08-23 20:34:06 · 4191 阅读 · 1 评论 -
Gulp+webpack模板化开发演练(1):分离公共头文件
分离html模板,抽取公共的模板 需要安装插件 这是一个webpack加载器,可以把文件原样返回字符串npm install raw-loader --save-dev示例代码 var header = require(“raw!xxx.html”); 就会把html内容读取出来首先创建一个header.html<p>这是头部公共部分</p>这个是给我们login.html来包含的<div原创 2016-08-23 22:24:45 · 2225 阅读 · 0 评论 -
gulp篇:速度上手,执行我们第一个任务
在前端开发过程中有很多事情是我们”手工”很难活很麻烦才能搞定的,因此需要借助一些第三方优秀工具。 1.比如JS文件的“编译”(这里还包含了不同语法的兼容) 2.JS和CSS的合并 3.文件的压缩 4.即时运行和监听gulp 这个工具是目前前端开发最火爆的工具之一知识点: npm install -g 如果不加-g则会安装到当前项目目录下。 加上-g就会安装到全局目录理 我们可以通过原创 2016-08-11 21:57:50 · 842 阅读 · 0 评论 -
gulp篇:前端"清洁大妈"的产生
前一节回顾 1.安装了gulp这个工具 2.在gulpfile.js里面编写了第一个任务(task)现在我们来设计一个需求,在需求中继续学习 知识点: 1.了解什么是管道 2.测试src、pipe、dest函数做项目的痛 项目做到后面,文件存放越来越乱。这页是在项目初期很正常的,尤其是参差不齐的队伍参与进来后。 比如我们经常碰到,队友在项目目录下随便编写JS文件。 那么作为项目组长,原创 2016-08-12 10:22:59 · 860 阅读 · 0 评论 -
sass实战演练03 - 响应式处理(1):变量模板、mixin实战用法
css3的@media属性 @media mediatype and|not|only(media feature){ //… }举个栗子: @media screen and (max-width:480px){ h1{color:red;} } 当屏幕宽度小于480px的时候生效换成sass写法 这里我们要借助@mixin 首先我们要定义不同的屏幕尺寸(使用变量原创 2016-09-03 20:53:38 · 1114 阅读 · 0 评论 -
gulp篇:速玩JS文件合并和压缩
gulp合并插件 安装: npm install gulp-concat --save-dev 安装好之后 var concat = require(‘gulp-concat’); //引用 接下来,只要concat(‘xxx.js’)就算合并了。注意此时只是在内存中生成前面我们学过管道的概念,因此代码整合非常简单 gulp.src([这里写上js]).pipe(concat(‘xxx原创 2016-08-13 10:02:00 · 18676 阅读 · 0 评论 -
webpack篇:编译JS的正确姿势
commonJS规范 http://commonjs.org 比如,一个单独的文件就是一个模块。使用require来加载模块,返回文件内部的exports对象。是否和nodejs的写法很像?确实,nodejs实现并推动了这个规范(一部分)。 有了这个规范,js可以在任何地方运行,不只是浏览者中(未来很多只要兼容commonJS规范的系统都可以用javascript来开发)遵循这个规范,然后呢?原创 2016-08-13 10:25:26 · 7190 阅读 · 0 评论 -
sass实战演练07 - 做一个有逼格的table(1)
1.表格结构 <div class="container"> <table class="table table-border"> <thead> <tr> <th>表头1</th> <th>表头2</th> <原创 2016-09-16 19:30:28 · 973 阅读 · 0 评论 -
sass实战演练08 - 做一个有逼格的table(2)
前一篇我们的表格还有很多问题,这里我们继续优化。 td直接有难看的间距 常规的方法可以加:<table class="table table-border" cellspacing="0"> css里怎么实现呢?border-spaceing:0今天的需求定义一个样式,鼠标移动到表格行上会变色 原生实现很简单:.table-hover-gray>tbody>tr:hover{ bac原创 2016-09-17 22:07:24 · 771 阅读 · 0 评论 -
webpack和gulp"勾结"初步
要结合gulp和webpack同样有个插件npm install gulp-webpack --save-dev1.gulpfile.jsvar gp = require('gulp');var uglify = require('gulp-uglify');var webpack = require('gulp-webpack');var webpack_config = require('原创 2016-08-14 16:52:02 · 781 阅读 · 0 评论 -
实战演练:用gulp 构建前端页面(1)---静态构建
gulp模板插件npm install gulp-template --save-dev通过这个插件,我们可以像写后台模板(比如PHP)一样写前端页面。创建一个新任务 然后创建一个index.html文件 然后在body里面写上:我的年龄是:<%=age %> (这是不是很像php?)<!DOCTYPE html><html><head> <title></title> <原创 2016-08-14 21:38:00 · 1702 阅读 · 0 评论 -
自己制作一个node_modules的模块
1.在node_modules目录下,新建myLib文件夹,然后新建一个index.js,写上:function showName(){ console.log('调用了showName函数');}exports.showName = showName;2.外部引用就可以直接写模块名了var getlib = require("myLib");getlib.showName();疑问:为原创 2016-08-10 20:18:28 · 11175 阅读 · 1 评论 -
NPM来安装jquery
npm是什么? 是随同nodeJS一起安装的包管理工具。 官方镜像网站:https://www.npmjs.com 比如我们最熟悉的jquery: https://www.npmjs.com/package/jquery下面演示npm下载jquery 1.cd到项目目录下 2.$ npm install jquery 这样我们项目目录下,就多了node_modules目录,里面有jq原创 2016-08-10 20:07:45 · 55289 阅读 · 0 评论 -
require外部文件
1.定义外部函数lib.js:exports.showName = function(){ console.log('调用了showName函数');}还可以换另外一种写法:function showName(){ console.log('调用了showName函数');}exports.showName = showName;2.在index.js如何引用这个外部文件?var原创 2016-08-10 19:51:17 · 983 阅读 · 0 评论 -
高逼格Babel,快速入门
为什么要使用babel? 目前ECMAScript 2015(ES6)已经极为流行了,只不过目前浏览器还不兼容。所以babel出现了。babel的特点 babel是一个js转换器(平台),它的出现使得我们可以立即使用ES6的语法,特点如下: 1.目前公认的对ES6规范兼容最高的工具 2.不断更新并且支持ES6的转化,我们用babel能做大量的新语法的实验 3.内置优化器,能够在一定程度上加原创 2016-08-27 21:33:04 · 1513 阅读 · 0 评论 -
实战演练:用gulp+EJS像CMS那样生成完整新闻内容面
ejs 安装npm install ejs --save-dev官网:http://wwww.embeddedjs.com 这是一个很经典且使用非常简单的js模板引擎。如果你用过nodejs开发后端,那么ejs应该有所了解。 但我们这里只探讨在前端理的使用。一、测试一下 1.随便新建一个ejs.html<!DOCTYPE html><html><head> <title></ti原创 2016-08-17 21:43:45 · 2579 阅读 · 0 评论 -
实战演练:用gulp+webpack构建用户登录(1)
1.先看目录结构 src目录下是源文件,最终要”编译”到build目录下。 tpl/login.html是登录模板文件,主要代码如下 <h2>用户登录</h2> <p>用户名:</p> <p><input type="text" name="username" id="username" /></p> <p>密码:</p> <p><input type=原创 2016-08-19 19:37:28 · 1412 阅读 · 0 评论 -
实战演练:用gulp+webpack构建用户登录(2):简化
实战演练:用gulp+webpack构建用户登录(1)里有一个缺陷:后面页面上的js是我们手工引入的。利用htmlWebpackPlugin简化页面构建初步 1.安装npm i html-webpack-plugin --save-dev2.修改webpack的配置文件 var HtmlWebpackPlugin = require(‘html-webpack-plugin’) plugins原创 2016-08-19 20:40:34 · 670 阅读 · 0 评论 -
sass实战演练05 - 把布局拆分为12列(1):函数、字符串拼接、集合函数append
前面我们实现了,当我们拉动屏幕改变宽度时,container的width属性会跟着一起变化。 基于这个思路我们就可以扩展了,比如把屏幕分成12列。1.我们在global.scss文件里写一个函数,目的是用来循环输出col-xs-*// 屏幕从1-12通用样式定义@function getxs(){ $res:""; @for $i from 1 through 12{ $res:原创 2016-09-10 15:41:48 · 1733 阅读 · 0 评论 -
sass实战演练01 - 外部文件引用和变量
SASS是什么? 目前前端开发中css已经是公认的”前端程序员必须掌握”的知识,最早的css编写都是手工一条条写出来的,工作量大、不利于维护。 而sass的存在使得css开发可以像写代码一样最终生成一个正常的css文件。我们直接开干 新建一个文件,后缀名为scss(为什么看到有的资料是.sass?) sass有2种语法: 1.一种是以sass后缀,对代码的排版有着非常严格的要求,而且没有大原创 2016-08-30 23:18:22 · 8598 阅读 · 0 评论 -
nodeJS初始
基本介绍 1.nodeJS可以用来开发后端(很强) 2.在前端开发上已经成为一种时尚、一种必备良药下载nodeJS 官网 https://nodejs.org 选择LTS(长期支持版本) 请把nodeJS的可执行目录设置到环境变量理,确保在任何地方都可以执行node。创建第一个文件 在项目目录下,创建一个js文件,比如zhangsan.js 里面写一句:console.log('i a原创 2016-08-09 20:04:38 · 716 阅读 · 0 评论 -
用webpack把我们的业务模块分开打包
如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js:// entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'],这样就可以全部打包,最终生成./build/js/build.js1,那么如果我们想最后生成不同的文件,该如何做到呢原创 2016-08-21 20:14:20 · 20813 阅读 · 0 评论 -
用webpack把我们的业务模块分开打包2
事实上,jquery这样的库我们生产环境肯定要使用CDN,而不会和我们的业务模块打包打一起。 比如国内的CDN地址: http://cdn.bootcss.com/jquery/1.12.4/jquery.js externals:{ ‘jquery’:’jQuery’ },1.源模板文件login.html引入jq<!DOCTYPE html><html><head>原创 2016-08-21 21:20:09 · 3570 阅读 · 0 评论 -
sass实战演练06 - 把布局拆分为12列(2):拆分和偏移
css知识点 box-sizing: border-box; 让border和padding也加入总宽度的计算之内*{ margin: 0; padding: 0; font-size: 14px; box-sizing: border-box;};1.拆分为12列@for $i from 1 through 12{ .col-xs-#{$i}{ float: le原创 2016-09-12 19:59:49 · 461 阅读 · 0 评论 -
构建登录页面:样式处理初步
1.给login.html模板文件添加外部css样式<button id="loginBtn" class="redBtn">登录</button><button class="greenBtn">注册</button>./src/css/main.css: <button id="loginBtn" class="redBtn">登录</button><button class="greenB原创 2016-08-22 19:45:38 · 1308 阅读 · 0 评论 -
构建登录页面:css提取(不打包到js中)
https://github.com/webpack/extract-text-webpack-plugin 安装:npm install extract-text-webpack-plugin --save-dev1.新建一个css,./src/css/user.css:h2{color: blue}./src/login.js:require('./css/user.css');2.如果就这样原创 2016-08-22 20:13:59 · 3208 阅读 · 0 评论 -
多页面分离资源引用,按需引用JS和css
1.新建./src/tpl/index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <scritp src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></scritp></head><原创 2016-08-22 21:08:06 · 7378 阅读 · 0 评论 -
用webpack的CommonsChunkPlugin提取公共代码的3种方式
前面我们实现了 多页面分离资源引用,按需引用JS和css 但有一个问题:最后生成的3个js,都有重复代码,我们应该把这部分公共代码单独提取出来。方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.jsvar HtmlWebpackP原创 2016-08-22 21:33:00 · 52599 阅读 · 1 评论 -
sass实战演练04 - 响应式处理(2):最外层container的响应式宽度写法
Sass中的集合变量 前面我们学过了定义变量(字符串形式),实际上Sass还支持集合(类数组形式) screen:(screen:(xs,sm,sm,md,lg);其中内置函数length(lg); 其中内置函数length(screen)可以获取这个集合的长度List对应函数 length(list)返回一个列表的长度值nth(list) 返回一个列表的长度值 nth(list,n)原创 2016-09-06 20:38:59 · 4264 阅读 · 0 评论