提示:路径中不允许出现中文,否则scss编译会出错,大概。

按照惯例,先检查一下Node.js、npm(cnpm)、gulp的版本号

1.新建package.json

我们可以通过手动新建这个配置文件  也可以通过执行 npm init

package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件

2.通过更改package.json来安装各种需要的插件,而我的方案则是

 {
"name": "xueweijie",
"version": "1.0.0",
"description": "this is a test",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "xueweijie&gulp",
"license": "ISC",
"devDependencies": { //开发环境 也就是说打包之后还需要用到的插件
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1", //为css自动增加前缀
"gulp-cache": "^0.4.5", //清除缓存
"gulp-connect": "^5.0.0" //浏览器自动刷新
},
"dependencies": { //生成环境
"gulp-htmlmin": "^3.0.0", //编译html
"gulp-imagemin": "^3.3.0", //编译images
"gulp-minify-css": "^1.2.4", //编译css
"gulp-concat": "^2.6.0", //按顺序打包js(让多个js生成一个js)
"gulp-uglify": "^2.1.2", //编译js
"gulp-file-include": "^0.13.7", //模板复用
"gulp-sass": "^3.1.0" //编译sass
}
}

以gulp-cache举例  你也可以通过自己 npm install gulp-cache --save-dev

以gulp-htmlmin举例  你也可以通过 npm install gulp-htmlmin --save

而dev就是让它们在生成环境还是开发环境的区别

注意: 去掉注释!

3.通过 npm install  安装node_modules  (太长就不放了)

 

4.在目录中新建一个gulpfile.js

5.开始配置gulpfile.js

 var gulp = require('gulp');

 // 浏览器自动刷新
var connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
livereload: true
});
}); // 编译html
var htmlmin = require('gulp-htmlmin');
var fileinclude = require('gulp-file-include');
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
gulp.task('html', function () {
return gulp.src('./src/html/**/*.html') //生产路径
.pipe(htmlmin(options)) //压缩html
.pipe(fileinclude({ //模板复用
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/html')) //打包路径
.pipe(connect.reload());
}); // 编译css
var cssmin = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer'); //自动增加前缀
var sass = require('gulp-sass');
gulp.task('css', function () {
return gulp.src('src/css/**/*.scss') //生成路径
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认:true
}))
.pipe(sass())
.pipe(cssmin({
advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
compatibility: '*',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
}); // 编译js
var uglify = require('gulp-uglify');
gulp.task('js', function () {
return gulp.src('src/js/**/*.js') //生产路径
.pipe(uglify({
mangle: {except: ['require' ,'exports' ,'module' ,'$']},
compress: true,//类型:Boolean 默认:true 是否完全压缩
preserveComments: 'all' //保留所有注释
}))
.pipe(gulp.dest('dist/js')) //打包路径
.pipe(connect.reload());
}); // 编译 images
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image', function () {
return gulp.src('src/images/*.{png,jpg,gif,ico}') //生成路径
.pipe(cache(imagemin({
optimizationLevel: , //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
})))
.pipe(gulp.dest('dist/images')); //打包路径
}); // 编译 copy
var concat = require('gulp-concat');
gulp.task('copy', function() { //静态资源
return gulp.src('src/lib/*.js')
.pipe(concat('all.js')) //打包成all.js
.pipe(gulp.dest('dist/lib'))
}); //编译 iconfont
gulp.task('iconFont', function() {
return gulp.src('src/iconfont/*')
.pipe(gulp.dest('dist/iconfont'))
}); //实时监听
gulp.task('watch', function () { gulp.watch(['./src/html/**/*.html'], ['html']); gulp.watch(['./src/css/**/*.scss'], ['css']); gulp.watch(['./src/js/**/*.js'], ['js']); }); gulp.task('default', ['connect', 'watch','html','css','js','image','copy','iconFont']);

6.建立src目录,开始搭建目录结构

首先将公共部分的css跟js引入页面,lib为静态资源,通过顺序用上述插件打包成一个js,再以采用一个页面一个css,一个页面一个js的方法进行编写

模板复用这一块通过新建一个后缀名为inc的文件,再在后缀名为html里引入即可,路径要把控好

7.打包上线 gulp 打包  gulp watch  实时监听

dist即为打包之后的项目

从两者之间的大小即可看到效果, 由于我做的image这一块优化不深,推荐一个深度优化图片的网站(免费!!) https://tinypng.com/  这样项目的大小会变得更小一点。

通过gulp watch既可以实时监听,在src里改变了什么,浏览器就可以直接看到。

gulp基础使用及进阶的更多相关文章

  1. gulp基础操作实践

    按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...

  2. 十三. Python基础(13)--生成器进阶

    十三. Python基础(13)--生成器进阶 1 ● send()方法 generator.send(value) Resumes the execution, and "sends&qu ...

  3. python基础篇之进阶

    python基础篇之进阶 参考博客:http://www.cnblogs.com/wupeiqi/articles/5115190.html python种类 1. cpython  使用c解释器生产 ...

  4. 万门大学Python零基础10天进阶班视频教程

    点击了解更多Python课程>>> 万门大学Python零基础10天进阶班视频教程 课程简介: 旨在通过两周的学习,让学生不仅能掌握python编程基础从而进行计算机程序的开发, 还 ...

  5. Python知识(1)----基础入门和进阶总结。

    今天把Python的语法过了一遍,学习了慕课网上的教程,简单易懂,1个小时就可以入门Python了.Python有两个主要的版本,Python2.7,Python3.5,后面的版本,改动较大,编写的程 ...

  6. Python基础—面向对象(进阶篇)

    通过上一篇博客我们已经对面向对象有所了解,下面我们先回顾一下上篇文章介绍的内容: 上篇博客地址:http://www.cnblogs.com/phennry/p/5606718.html 面向对象是一 ...

  7. 一凡老师亲录视频,Python从零基础到高级进阶带你飞

    如需Q群交流 群:893694563 不定时更新2-3节视频 零基础学生请点击 Python基础入门视频 如果你刚初入测试行业 如果你刚转入到测试行业 如果你想学习Python,学习自动化,搭建自动化 ...

  8. Gulp基础

    1.什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. 2.为什么使用gulp? gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工 ...

  9. Python之路,Day8 - Python基础 面向对象高级进阶与socket基础

    类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对象的 ...

随机推荐

  1. 高并发系列之——缓存中间件Redis

    1 概念和使用场景 下载路径 2 基本存储类型 String List Set SortedSet Hash 3 事务 单线程执行,即只能保证一个client发起的事务中的命令可以连续的执行,而中间不 ...

  2. 深入理解LinkedBlockingQueue

      说明 通过阅读源码,了解LinkedBlockingQueue的特性.本文基于JDK1.7源码 正文 通过查询API对LinkedBlockingQueue特点进行简单的了解: LinkedBlo ...

  3. HTML骨架详解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. http_proxy_module 模块(proxy_pass 指令)

    1. proxy_pass 指令介绍 该指令属于 http_proxy_module, http_proxy_module 模块可以将请求转发到另一台服务器. 在 nginx 反向代理是,会通过 lo ...

  5. 关键业务系统的JVM参数推荐(2018仲夏版) (强烈推荐 唯品会)

    年更贴,因为两年里遇到的事情,一些想法变了.也补充了不少VJTools的内容,比如为伸手党们准备的jvm-options.sh. 在关键的业务系统里,除了继续追求技术人员最爱的高吞吐与低延时之外,系统 ...

  6. bootstrap学习笔记细化(表单)

    主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...

  7. ionic--分模块

    1. app.js var app=angular.module("myApp",["ionic","myController"," ...

  8. WinForm实现Rabbitmq官网6个案例-Routing

    代码: namespace RabbitMQDemo { public partial class Routing : Form { private string exchangeName = &qu ...

  9. HTML中的Head标签学习

    在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...

  10. Gulp前端服务器本地搭建

    前端服务器本地搭建分三阶段: 1.Node.js的安装 2.Npm环境配置 3.编写JS文件 1.Node.js安装: 如图所示: Next: 选择I accept 然后Next: 选择安装文件的位置 ...