使用构建工具之前我觉得前端好蠢,css没有变量,不能写循环,为了兼容要写好多前缀,hmtl写多页面中有同一个header,我就粘贴复制,然后修改的时候每个都要改。

我还不会压缩和合并,每次都要按F5刷新。其实这些问题也是网页优化的问题。

构建工具正是解决这些问题的集合。虽然网上gulp和webpack的教程很多,我还是根据自己的需求整理了一下。

gulp安装: https://markgoodyear.com/2014/01/getting-started-with-gulp/

webpack安装: http://webpack.github.io/docs/installation.html

基本的需求:

css:要能编译sass,要压缩,要能自己补前缀

js:要压缩,要丑化(就是把变量名换成简单的字母,即省空间又不容易被看懂),要合并

img: 要压缩

html:可以引入文件(就解决一开始说的问题,多页面下共同的组件)

gulp中的watch功能可以监听文件,通过livereload和gulp的监听来实现保存后自动构建并刷新页面十分带感。

在给gulpfile之前,先看一下我的目录结构:

src是生产目录,就是代码都是在这了面编写的

dist是发布目录,里面装的就是经过压缩合并等,构建好的文件目录

我把html也放在src目录里了(可能有些人写在dist中),然后构建的时候在移到dist目录中,这样生产和发布的目录就分离的比较好,你上传到git上的时候可以只上传src中的东西

.jshintrc是一个叫gulp-jshint插件对应的配置文件,这个插件是用来检查你的js的书写规范和错误的,配置是配置它的规则

.babelrc是配置es6的,这个后面再说。

gulpfile

// 载入外挂
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
order = require("gulp-order"),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
fileinclude = require('gulp-file-include') ; // 样式
gulp.task('styles', function() {
return sass('src/css/*.scss')
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'Styles task complete' }));
}); // 脚本
gulp.task('scripts', function() {
return gulp.src(['src/**/*.js'])
.pipe(order([
"lib/jquery-2.0.3.min.js",
"lib/*.js",
"js/*.js"
]))
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(notify({ message: 'Scripts task complete' }));
}); // 图片
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
//html
gulp.task('html', function() {
return gulp.src('src/**/*.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/'))
.pipe(notify({ message: 'html task complete' }));
});
// 清理
gulp.task('clean', function() {
return gulp.src(['dist/css', 'dist/js', 'dist/images'], {read: false})
.pipe(clean());
}); // 预设任务
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images', 'html');
}); gulp.task('watch', function() { // 看守所有.scss档
gulp.watch('src/css/**/*.scss', ['styles']); // 看守所有.js档
gulp.watch('src/js/**/*.js', ['scripts']); // 看守所有图片档
gulp.watch('src/images/**/*', ['images']); //看守html
gulp.watch('src/**/*.html', ['html']) ; livereload.listen();
gulp.watch(['dist/**']).on('change', livereload.changed); });

有几个插件说明一下:

1.gulp-notify这个插件是用来完成任务后给你一个提示音的,因为如果项目大第一次构建会很慢。

2.gulp-concat插件合并js的时候是没有顺序的,所以我用了gulp-order来解决依赖的问题,比如好多文件依赖jquery

3.gulp-cache插件是缓存img,因为img压缩很费时间,所以这个插件就是指构建有变更的img

4.gulp-livereload这个插件需要chrome中的插件支持,在chrome浏览器中右上角,设置->扩展程序->获取更多扩展程序 在这里搜索livereload,并下载安装

安装完成后会有这样的图标,在要用的时候点一下,让中间的方形变成实心的就好了

编译sass遇到的坑:

编译sass使用的是插件是gulp-ruby-sass,之前经常报错是编码的问题,后面将项目路径的中文名改成英文名就解决了问题。

网上还有最终方案是在SASS 项目中 config.rb 配置文件 指定SASS的字符集

encoding = “utf-8”

出处:http://wuyixiang.sinaapp.com/sass-compass-compile-error/

感觉gulp这些功能都蛮不错,但我其实还有一些需求没说,是关于js的

1.模块化(避免命名冲突)

2.要用es6(跟上潮流嘛)

3.js能不能按需加载?比如说我有页面A和页面B,他们都依赖一个base.js,然后又分别各自依赖a.js和b.js,这种情况我用刚才的gulpfile打包以后合并出来的一个公共的js是将三个js都包括了,但显然页面B不需要a.js,所以当用户单独访问页面B的时候加载的js就显得多余了,就多费了流量啊,速度也会慢。

上述的前两个gulp还是能解决,但是第三个问题好像并不好解决。。。在查找各方资料后我决定用webpack,所以就是其他css,html的部分还是gulp来处理,但是把js交给webpack来处理

webpack登场!!

其实使用了es6后就可以用新特性export和import写模块化的东西了,所以前两个需求算是合并了。

import和export举例:

export class animal{
constructor(name){
this.name = name;
}
sayhi(){
//console.log(`hi ${this.name} !`);
alert(this.name);
}
} export var myname = "mtjs " ;
import {animal,myname} from './animal' ;

第三个需求使用webpack中的CommonsChunkPlugin这个插件实现的

这个插件可以把多个html中公共依赖的部分打包成一个和多个公共依赖包(chunk),这样每个页面只需要引入这个公共chunk和自己单独的js就可以了。

webpack和gulp一样,都是用配置文件的:

const webpack = require('webpack');
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports = {
entry: {
index:'./src/js/index.js',
main:'./src/js/main.js'
},
output: {
filename: '[name].js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
}, plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),//压缩和丑化 new webpack.ProvidePlugin({
$: 'jquery'
}),//直接定义第三方库 new CommonsChunkPlugin({
name: "commons",
// (the commons chunk name) filename: "commons.js",
// (the filename of the commons chunk) minChunks: 2,
// (Modules must be shared between 2 entries) chunks: ["index", "main"]
// (Only use these entries)
})//定义公共chunk ]
};

在webpack中每个页面都要有一个entry,这里index和main就是两个页面的entry,在这个entry中定义依赖就好了,output中本来还可以指定生成文件的路径,但我们将路径放在gulpfile中统一处理

配置中我们用了babel的loader来编译用es6标准写的js文件,这个loader需要前面说到的.babelrc文件来配置

CommonsChunkPlugin的参数:

name:chunk名

filename:生成的文件名

minChunks:最小引用次数,一个依赖最少被引入这个次数才会被加到公共的chunk中

chunks:指定这个chunk是由哪些页面构成的

好了js处理完了,现在将gulp和webpack结合起来就好了

在gulpfile中把原来的处理js的task删掉,添加下面的代码

var webpack = require('gulp-webpack');

gulp.task('scripts', function(callback) {
return gulp.src('src/entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('dist/js'));
});

这样就大功告成了,键入gulp和gulp watch来感受一下吧

项目github地址:https://github.com/jokermask/gulp_webpack_demo




												

gulp+webpack构建配置的更多相关文章

  1. 用gulp+webpack构建多页应用——记一次Node多页应用的构建过程

    通过参考网上的一些构建方法,当然也在开发过程中进行了一番实践,最终搭建了一套适用于当前多页应用的构建方案,当然该方案还处于draft版本,会在后续的演进过程中不断的优化. 个人觉得该方案的演进过程相对 ...

  2. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  3. 前端gulp自动化构建配置

    为了节省http请求次数.节约带宽,加速页面渲染速度,达到更好用户体验的目的.现在普遍的做法是在上线之前做静态资源的打包构建,也就是静态资源的合并压缩: 这里使用的是gulp,当然现在有更强大的模块化 ...

  4. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  5. grunt,gulp,webpack前端打包工具的特性

    1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...

  6. 深入浅出的webpack构建工具---PostCss(五)

    一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本, ...

  7. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  8. Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

  9. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

随机推荐

  1. mysql 分页数据错乱

    最近在使用mysql 分页查询数据的时候发现返回的数据与预期的不一样,显示数据重复错乱. 在官方文档 有这样一句话 If multiple rows have identical values in ...

  2. 17mysql2█▓

    一.数据库的查询用法 1. 数据表记录的查询: 运算符.虑重.列运算.别名.排序.聚合函数.分组 1.1数据准备 create table exam(   id int primary key aut ...

  3. LightOJ - 1341 Aladdin and the Flying Carpet (算术基本定理)

    题意: 就是....求a的所有大于b的因子有多少对 算术基本定理求 所有因子 阿欧...偷张图. 注意范围 就好  ..... 解析: 在1 -1012的范围内求大于b的所有a的因子的对数(有几对) ...

  4. hdu 5126 stars (四维偏序,离线,CDQ套CDQ套树状数组)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5126 思路:支持离线,那么我们可以用两次CDQ分治使四维降为二维,降成二维后排个序用树状数组维护下就好 ...

  5. SharePoint 2013 APP 开发示例 系列

    SharePoint 2013 APP 安全: SharePoint 2013 APP 开发示例 (一)List 读写 SharePoint 2013 APP 开发示例 (二)获取用户信息 Share ...

  6. 【AGC005F】简单的问题 Many Easy Problems

    Description 链接 Solution 对于每个\(k\),统计任选\(k\)个点作为关键点的"最小生成树"的大小之和 正向想法是枚举或者计算大小为\(x\).叶子数目为\ ...

  7. 洛谷 P2680 运输计划 解题报告

    P2680 运输计划 题目背景 公元2044年,人类进入了宇宙纪元. 题目描述 公元2044年,人类进入了宇宙纪元. \(L\)国有\(n\)个星球,还有\(n-1\)条双向航道,每条航道建立在两个星 ...

  8. yum 安装Mysql

    RHEL6.5-MySql-yum安装登录 客户端工具的使用mysql:Linux下提供了一个访问mysql服务器的客户端工具—mysql,其由mysql软件包提供,除了这些工具之外还有一些图形化界面 ...

  9. bzoj4985 评分 (二分答案+dp)

    首先二分一个答案x,然后我们把>=x的数看成1,<x的数看成0,那如果最后剩下1,这个答案就是合法的. 那我们就来算让某一位得1至少需要填几个1(设这个值是f[i]) i=1..n时,显然 ...

  10. CF1043

    找个下午打了场CF,结果被某uranus吊打......一千多名,过弱. T1,一眼二分了,后来发现题解是O(1)的hhh T2,题意精炼一下就是让你找一个串的循环节个数,直接n²枚举..... T3 ...