【[js高手之路]gulp教程-从入门到项目中快速上手使用】的更多相关文章

[js高手之路]gulp教程-从入门到项目中快速上手使用

在这之前,我已经分享过一个webpack的全系列,相对于webpack, gulp使用和配置起来非常的简单. gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件 命令:  npm install gu…

[js高手之路] es6系列教程 - 对象功能扩展详解

第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.name; } }; console.log( User.showName() ); //有了es6之后,这么写 let User = { name : 'ghostwu', showName (){ return this.name; } }; console.log( User.showName()…

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他的配置选项的探讨. 一.chunks选项 这个属性非常有用,可以指定某个页面加载哪些chunk( 如:js文件 ) 我们可以用他做多个页面模板的生成. 比如,我们在实际开发中,做一个博客网站,一般来说有首页,文章列表页,文章详情页等等,这些页面都有一个特点,都要引入一些公共的js文件以及该页面特有的…

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意的添加自定义的数据 webpack.dev.config.js文件: var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : { main : './src/js/main.js', cal…

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢?,我们可以使用插件html-webpack-plugin,首先安装这个插件npm install html-webpack-plugin --save-dev,好的,接下来就开始用这个插件了 官方参考文档: 插件通用用法:https://webpack.j…

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 module.exports = { entry : ['./src/js/main.js', './src/js/calc.j…

[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等. 官方参考文档:https://webpack.js.org/loaders/ 我们从本文开始,重新搭建一个项目结构来解释下loader的用法. 一.项目结构搭建准备: 目录结构: demo3 dist src components modal.html modal…

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在webpack使用图片资源,我们需要用file-loader来处理. 安装file-loader: npm install file-loader --save-dev 在src目录下面新建一个文件夹( img ) 存储图片 一.demo3目录下面的index.html文件引入图片 <body> &l…

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease 1s; } 一.这是一个css3的过渡样式,我们知道,写css3的时候,需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件 安装postcss-loader: npm install postcss-loader --save-dev 安装au…

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 cxt.lineTo( x2, y2 ):将画笔从起点开始画直线,一直画到终点坐标( x2, y2 ) cxt.stroke();用画笔连线,moveTo,lineTo并不会产生实际的线条 x1,y1,x2,y2是点的坐标,canvas的坐标原点在canvas的左上角. 画一根直线: <style…