安装 Node

nodejs.org 根据系统选择性按照教程安装Node。

创建项目

  • 创建项目文件夹

  • 进入项目文件夹

  • 初始化项目

使用npm命令:npm init,根据提示完成。

安装 Gulp

进入项目文件夹,使用Node的包管理命令npm进行安装.

  • 全局安装

npm install -g gulp
  • 项目依赖中安装

npm install --save-dev gulp

创建Gulp配置文件

  • 在项目根目录新建配置文件gulpfile.js

设置配置信息

以常见的Gulp插件为例,如下:

  1. js代码校验(gulp-jshint)

  2. 合并js文件(gulp-concat)

  3. 压缩js代码(gulp-uglify)

  4. sass的编译(gulp-sass)

  5. less的编译(gulp-less)

  6. 压缩css(gulp-minify-css)

  7. 重命名(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基础入门的更多相关文章

  1. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  2. JS基础入门篇(二十七)—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  3. egg.js基础入门

    之前一直使用koa, 刚刚接触egg, 做了一些入门的笔记 准备工作 1  首先安装脚手架,,并创建项目. $ npm i egg-init -g $ egg-init egg-demo --type ...

  4. React.js基础入门

    本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...

  5. Nuxt.js 基础入门教程

    原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只 ...

  6. JS基础入门篇(六)— 数据类型

    1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...

  7. Underscore.js基础入门

    公司产品集成了对Underscore.js,所以需要对这个库有一定的了解.通过查阅资料,发现这个库主是对Array和JSON的处理支持.通过Underscore.js库,可以方便的对Array和JSO ...

  8. JS 基础 入门

    JS做弹窗效果 //单行注释/*多行注释*/// 网页 标签语言    js语言是脚本语言/* 数据类型: 容器 1.整型  (int)  2.小数类型: float: 单精度的小数: double: ...

  9. JS基础——入门必备

    ·首先,来简单的说一下,JS是啥,JS是JavaScript的简写,是 基于浏览器的 基于对象的 事件驱动 脚本语言 ·那么JS有什么用呢?ta可以实现: 表单验证 添加动画效果 动态更改页面内容 A ...

随机推荐

  1. 学习笔记-Java编程思想

    2016-01-03 Swith(整数选择因子):必须是int或char这样的整数值. Java中不包含goto语句,但是可以通过标识符实现类似的控制.

  2. 使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE)

    一.原始写法 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ // ...

  3. Bash之PS1配置

    今天想调整以下PS1的显示,查看了很多文档后有些收获.Bash有可自定义的4类提示: PS1 在每个命令之前显示的主提示符,因此它是每个人都不同的. PS2 当一个命令需要更多的输入(例如,一个多行命 ...

  4. java mongoDB 二级数组嵌套查询

    场景: 会员集合下有多个会员文档,会员文档下有多个订单文档,订单买了多个商品文档 member->orders>orderItems 要求: 通过会员id和商品id验证会员是否购买过该商品 ...

  5. MVC 下 JsonResult 的使用方法(JsonRequestBehavior.AllowGet)【转】

    MVC 默认 Request 方式为Get. actionpublic JsonResult GetPersonInfo(){var person = new{Name = "张三" ...

  6. kafka单节点测试

    ======================命令====================== 启动zookeeper server bin/zookeeper-server-start.sh conf ...

  7. docker存储结构解析

    由于aufs并未并入内核,故而目前只有Ubuntu系统上能够使用aufs作为docker的存储引擎,而其他系统上使用lvm thin provisioning(overlayfs是一个和aufs类似的 ...

  8. float、定位、inline-block、兼容性需注意的特性总结

    inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline ...

  9. 重载Python FTP_TLS 实现Implicit FTP Over TLS方式下载文件

    对于Python2.7来说,内置的FTP_TLS类并不支持Implicit FTP Over TLS加密方式的FTP Server操作,为支持Implicit FTP Over TLS加密方式,必须重 ...

  10. 一. DotNet MVC4.0+EasyUI Web简单框架-前言

    之所以说它简单,是因为仅仅用了大家最熟悉的三层架构,简单明了 1.先新建一个MVC4.0 Web项目 2.添加EasyUI的引用,放到Script底下 http://files.cnblogs.com ...