gulp.js基础入门
安装 Node
去 nodejs.org 根据系统选择性按照教程安装Node。
创建项目
创建项目文件夹
进入项目文件夹
初始化项目
使用npm命令:npm init
,根据提示完成。
安装 Gulp
进入项目文件夹,使用Node的包管理命令npm进行安装.
全局安装
npm install -g gulp
项目依赖中安装
npm install --save-dev gulp
创建Gulp配置文件
在项目根目录新建配置文件
gulpfile.js
设置配置信息
以常见的Gulp插件为例,如下:
js代码校验(gulp-jshint)
合并js文件(gulp-concat)
压缩js代码(gulp-uglify)
sass的编译(gulp-sass)
less的编译(gulp-less)
压缩css(gulp-minify-css)
重命名(gulp-rename)
这些插件的安装命令如下:
npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename --save-dev
完整配置文件:
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
// 检查js脚本
gulp.task('lint', function() {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并,压缩js文件
gulp.task('scripts', function() {
gulp.src('./src/js/*.js')
//合并js文件
.pipe(concat('all.js'))
//给文件添加.min后缀
.pipe(rename({ suffix: '.min' }))
//压缩脚本文件
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
// 编译sass
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 编译less
gulp.task('sass', function() {
gulp.src('./src/less/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
});
// 压缩css
gulp.task('style', function() {
gulp.src('./src/css/*.css')
.pipe(gulp.dest('./dist/style'))
.pipe(rename('all.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('./dist/style'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./src/js/*.js', function(){
gulp.run('lint', 'scripts');
});
gulp.watch('./src/sass/*.scss', function(){
gulp.run('sass');
});
gulp.watch('./src/less/*.less', function(){
gulp.run('less');
});
gulp.watch('./src/css/*.css', function(){
gulp.run('style');
});
});
gulp.js基础入门的更多相关文章
- JS基础入门篇(三十五)—面向对象(二)
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JS基础入门篇(二十七)—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- egg.js基础入门
之前一直使用koa, 刚刚接触egg, 做了一些入门的笔记 准备工作 1 首先安装脚手架,,并创建项目. $ npm i egg-init -g $ egg-init egg-demo --type ...
- React.js基础入门
本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...
- Nuxt.js 基础入门教程
原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只 ...
- JS基础入门篇(六)— 数据类型
1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...
- Underscore.js基础入门
公司产品集成了对Underscore.js,所以需要对这个库有一定的了解.通过查阅资料,发现这个库主是对Array和JSON的处理支持.通过Underscore.js库,可以方便的对Array和JSO ...
- JS 基础 入门
JS做弹窗效果 //单行注释/*多行注释*/// 网页 标签语言 js语言是脚本语言/* 数据类型: 容器 1.整型 (int) 2.小数类型: float: 单精度的小数: double: ...
- JS基础——入门必备
·首先,来简单的说一下,JS是啥,JS是JavaScript的简写,是 基于浏览器的 基于对象的 事件驱动 脚本语言 ·那么JS有什么用呢?ta可以实现: 表单验证 添加动画效果 动态更改页面内容 A ...
随机推荐
- 学习笔记-Java编程思想
2016-01-03 Swith(整数选择因子):必须是int或char这样的整数值. Java中不包含goto语句,但是可以通过标识符实现类似的控制.
- 使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE)
一.原始写法 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ // ...
- Bash之PS1配置
今天想调整以下PS1的显示,查看了很多文档后有些收获.Bash有可自定义的4类提示: PS1 在每个命令之前显示的主提示符,因此它是每个人都不同的. PS2 当一个命令需要更多的输入(例如,一个多行命 ...
- java mongoDB 二级数组嵌套查询
场景: 会员集合下有多个会员文档,会员文档下有多个订单文档,订单买了多个商品文档 member->orders>orderItems 要求: 通过会员id和商品id验证会员是否购买过该商品 ...
- MVC 下 JsonResult 的使用方法(JsonRequestBehavior.AllowGet)【转】
MVC 默认 Request 方式为Get. actionpublic JsonResult GetPersonInfo(){var person = new{Name = "张三" ...
- kafka单节点测试
======================命令====================== 启动zookeeper server bin/zookeeper-server-start.sh conf ...
- docker存储结构解析
由于aufs并未并入内核,故而目前只有Ubuntu系统上能够使用aufs作为docker的存储引擎,而其他系统上使用lvm thin provisioning(overlayfs是一个和aufs类似的 ...
- float、定位、inline-block、兼容性需注意的特性总结
inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline ...
- 重载Python FTP_TLS 实现Implicit FTP Over TLS方式下载文件
对于Python2.7来说,内置的FTP_TLS类并不支持Implicit FTP Over TLS加密方式的FTP Server操作,为支持Implicit FTP Over TLS加密方式,必须重 ...
- 一. DotNet MVC4.0+EasyUI Web简单框架-前言
之所以说它简单,是因为仅仅用了大家最熟悉的三层架构,简单明了 1.先新建一个MVC4.0 Web项目 2.添加EasyUI的引用,放到Script底下 http://files.cnblogs.com ...