gulp + webpack + sass 学习

最新推荐文章于 2024-09-05 12:11:21 发布

dicha7140

最新推荐文章于 2024-09-05 12:11:21 发布

阅读量188

点赞数

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/CyLee/p/5713897.html

版权

笔记：

1、

new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码，chunks:['index.js','main.js']

另一个作用就是单独生成一个js文件。使用 filename:'index.js' ,作用其实类似于entry。所以不推荐使用

2、所有的gulp任务都带一个回调函数。这个回调函数的调用，说明该任务结束了。

// zip压缩
gp.task('zip', cb => {
    // 获取当前的版本号并且升级一个档次
    getVersion(version => {
        gp.src(['./dist/**','!./dist/*.zip'])
          .pipe(zip(`${version}.zip`))
          .pipe(gp.dest('./dist'))
          .on('end', cb);
    })
})

3、gulp如何传参？

var minimist = require('minimist');

// 命令行传参传参
var knownOptions = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'dev' }
};

var options = minimist(process.argv.slice(2), knownOptions);

var _database = options.env === 'dev' ? 'tuandai_bm' : 'tuandai_bm_production'; 
var _ftpaddress = options.env === 'dev' ? 'ApiTest' : 'ApiPublish';

使用示例：gulp build --env prod

webpack默认只能加载（import）js文件
加载器（loader）的作用就是把其它类型的文件转换成Js代码文件引入到程序中打包为资源。

vue-loader - 用于加载.vue文件;
vue-style-loader - 用于加载.vue文件中的样式;
style-loader - 用于将样式直接插入到页面的<style>内;
css-loader - 用于加载.css文件;
less-loader/sass-loader - 用于加载和编译less/sass文件
babel-loader - 用于将js代码中的es6以上的代码转化为浏览器兼容的es5代码
file-loader - 用于直接加载文件
url-loader - 用于加载网络请求的文件，通常是字体文件，图标文件

demo1：

下载

npm install -g gulp

npm install gulp --save-dev

新建gulpfile.js文件

var gp=require("gulp");
gp.task("Task_001",function(){    console.log("i am gulp");
})

使用： gulp Task_001

demo2

将文件归类到build下，注意gp.dest这个函数专门用来指定输出目录路径的，属于gulp中必写的格式

var gp=require("gulp");
var concat = require("gulp-concat");
gp.task("Task_001",function(){
    gp.src(['1.js','2.js','!3.js']).pipe(gp.dest('./build/js'));  //!表示排除
    gp.src(['*.css']).pipe(gp.dest('./build/css'));　　　　　　　　　//*表示所有
})

demo3

安装gulp模块：合并

npm install gulp-concat

gulpfile.js:

var gp=require("gulp");
var concat = require("gulp-concat");
gp.task("Task_001",function(){
    gp.src(['1.js','2.js','!3.js']).pipe(concat('main.js')).pipe(gp.dest('./build/js'));
})

demo4

安装gulp模块：压缩代码，需要用国内的淘宝镜像才可以下载

#安装淘宝镜像
npm install cnpm -g --registry=https://registry.npm.taobao.org 

#使用淘宝镜像下载才可以使用
cnpm install gulp-uglify --save-dev

gulpfile.js:

var gp=require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
gp.task("Task_001",function(){
    gp.src(['1.js','2.js','!3.js'])
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gp.dest('./build/js'));
})

demo4.1 压缩ZIP

github api：https://github.com/gulpjs/gulp/blob/master/docs/API.md#optionsbuffer

var gp = require("gulp");
const zip = require('gulp-zip');

gp.task('zip', cb => {
  // 将dist中所有的文件夹和文件压缩。必须是**.不要问为什么
   gp.src(['./dist/**'])
     .pipe(zip('test.zip'))
     .pipe(gp.dest('./dist/'))
     .on('end', cb); // 真正结束的回调
})

demo4.2 上传ftp

gp.task('ftp', cb => {
    gp.src(['./dist/*.zip'])
      .pipe(ftp({
        host: '192.168.0.0',
        port: 21,
        user: 'test',
        pass: 'test',
        remotePath: '/api/Content/h5'
    }))
    cb && cb()
})

demo4.3 使用mysql

multipleStatements 允许一次性发送多行sql

 var connection = mysql.createConnection({
    host: '192.168.1.1', 
    user: 'root', 
    password: 'root', 
    database: 'test', 
    port: 6033,
    multipleStatements: true
 
  });
  connection.connect();
  var sql = `select * from table_name`;
  connection.query(sql, function(err, rows, fields) {
       if (err) throw err;
       if (rows.length > 0) {
         console.log(row)
       } 
       connection.end();
  });

demo5：cms模板（单一数据）

安装

npm install gulp-template --save-dev #主角

npm install gulp_rename --save-dev   #能为输出文件动态命名，而不是写死

slib.js(将部分request请求封装到另一个js)

var _request = require('request');
#get请求示例
exports.load_AJAX = function(callback)
{
    _request.get('http://localhost/json2.php',function(err,response,body)
    {
        if(response.statusCode = '200')
        {
            callback(body);
        }
    })
}

#post请求示例
var post_data = function(callback)
{
    _request.post('http://localhost/json2.php',{
        'key':'lovemp',
        'name':'lee'
    },function(err,response,body){
        if(response.statusCode = '200')
        {
            callback(body);
        }
    })
}

gulpfile.js

var gp=require("gulp");
var gp_tpl = require('gulp-template');
var _slib = require('./slib');

var Render = function(body)
{
    //console.log(JSON.parse(body));
    var json = JSON.parse(body);
    gp.src(['index.html'])
      .pipe(gp_tpl(json))
      .pipe(_gp_rename(json.id + '.html'))  #动态命名，如果没有这句，默认就会生成原名
      .pipe(gp.dest('./build'));
}

gp.task('cms',function()
{
    _slib.load_AJAX(Render);
})

php数据源

<?php 
header("Access-Control-Allow-Origin:*");
$arr = array();
$arr["id"] = 1;
$arr["title"] = "那些年我们一起追过的女孩";
$arr["info"] = "那些年，我们一起追的女孩》是群星瑞智艺能有限公司和台湾索尼音乐娱乐股份有限公司联合出品的一部青春爱情电影，柴智屏监制，作家九把刀自编自导，陈妍希、柯震东等主演。该片讲述了柯景腾和沈佳宜之间令人唏嘘的爱情故事";
exit(json_encode($arr));
?>

html模板页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1><%= id %></h1>
    <hr />
    <h1><%= title %></h1>
    <hr />
    <h1><%= info %></h1>
</body>
</html>

控制台输入：gulp cms

但是这种方式只能渲染出一条，很废材，所以继续学习渲染多条的方式

demo5：cms模板（多条数据）

安装gulp-ejs

npm install gulp-ejs --save-dev

html模板代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%= title %>
    <ul>
        <% for(var i in list) { %>
        <li><%= list[i].id %></li>
        <li><%= list[i].moiveName %></li>
        <li><%= list[i].info %></li>
        <hr />
        <% } %>
    </ul>
</body>
</html>

php数据源

<?php 
header("Access-Control-Allow-Origin:*");
        $arr = array();
        $arr[0]["moiveName"] = "美国队长3内战";
        $arr[1]["moiveName"] = "X战警3天启";
        $arr[2]["moiveName"] = "大鱼海棠";

        $arr[0]["id"] = "1";
        $arr[1]["id"] = "2";
        $arr[2]["id"] = "3";

        $arr[0]["info"] = "奥创纪元之后，全球政府联合颁布法令，管控超能力活动。对这条法令的不同态度，使复仇者阵营一分为二，钢铁侠和美国队长各据一方，其他复仇者则不得不做出自己的选择，最终引发前任盟友间的史诗大战。";
        $arr[1]["info"] = "该片故事以20世纪80年代为背景，讲述了古老强大的第一个变种人天启在埃及醒来，他想统治并改变这个世界，而引发一系列变种人大战的故事";
        $arr[2]["info"] = "所有人类的灵魂都是海里一条巨大的鱼，出生的时候从海的此岸出发，在路途中，有时相遇，有时分开，死的时候去到海的彼岸，之后变成一条沉睡的小鱼，等待多年后的再次出发，这个旅程永远不会结束，生命往复不息。十六岁生日那天，居住在“神之围楼”里的一个名叫椿的女孩变作一条海豚到人间巡礼，被大海中的一张网困住，一个人类男孩因为救她而落入深海死去。为了报恩，为了让人类男孩复活，她需要在自己的世界里，历经种种困难与阻碍，帮助死后男孩的灵魂——一条拇指那么大的小鱼，成长为一条比鲸更巨大的鱼并回归大海";
        $arr =  array('title'=>'电影列表','list' => $arr);
        exit(json_encode($arr));
?>

gulpfile.config.js

var gp=require("gulp");
var gulp_ejs = require('gulp-ejs');
var _slib = require('./slib');


var render2 = function(body)
{
    var json = JSON.parse(body);
    gp.src(['index.html'])
      .pipe(gulp_ejs(json))
      .pipe(gp.dest('./build'));
}
gp.task('cms2',function(){
    _slib.get_data(render2);
})

demo7：实战登录功能 webpack + gulp

webpack负责编译核心js，gulp负责掌控任务

下载

sudo npm install webpack

sudo npm install gulp-webpack 

npm install html-webpack-plugin --save-dev

npm install jquery@1.11.0 --save-dev

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    entry:{
        main:'./src/js/main.js',
        user:['./src/js/login.js','./src/js/regin.js']
    },
    output: {
        path: __dirname + '/build/js',  //输出文件夹
        filename:'build.js'   //最终打包生成的文件名
    },
    plugins:[
        //动态将上面编译好的js文件导入到以下html文件中
        new HtmlWebpackPlugin({
            filename:__dirname + '/build/html/login_build.html', 
            template:__dirname + '/src/tpl/login.html',
            hash:true,
            inject:"body"  
        }),
        new webpack.ProvidePlugin({
            $:'jquery'   //全局自动加载jquery
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name:"user",  //对应entry的对象名称
            filename:"user.js"
        })
    ]
}

gulpfile.js

var gp = require('gulp');
var gulp_webpack = require('gulp-webpack');
var gulp_uglify = require('gulp-uglify');
var webpack = require('webpack');
var webpack_config = require('./webpack.config.js');


gp.task('run',function()
{
  webpack(webpack_config,function(){
      //先执行webpack任务，再执行其他（gulp任务）
  })
   
})

命令行执行：gulp run

demo8:在js中加载Css

下载

npm install css-loader  style-loader

webpack.config.js 加入以下代码

module:{
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css']
       }　
    ]
}

demo9:按需加载Js

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

module.exports = {
       entry:{
        main:'./src/js/main.js',
        user:['./src/js/login.js','./src/js/regin.js'],
        index:['./src/js/index.js']
    },
    output: {
        path: __dirname + '/build/js',  //输出文件夹
        filename:'[name].js'            //最终打包生成的文件名,但如果写为‘[name].js’ 表示将entry各自生成不合并
    },
    module:{
        loaders: [
            {
                test: /\.css$/,
                loaders: ['style', 'css']
            }　
        ]
    },
    plugins:[
        //动态将上面编译好的js文件导入到以下html文件中并且生成到指定目录
        new HtmlWebpackPlugin({
             filename:__dirname + '/build/html/login.html', 
             template:__dirname + '/src/tpl/login.html',
             hash:true,
             inject:"body",
             chunks:['user']  
        }),
         //动态将上面编译好的js文件导入到以下html文件中并且生成到指定目录
        new HtmlWebpackPlugin({
             filename:__dirname + '/build/html/index.html', 
             template:__dirname + '/src/tpl/index.html',
             hash:true,
             inject:"body",
             chunks:['index']  
        }),
        new webpack.ProvidePlugin({
            $:'jquery'   //全局自动加载jquery
        })
    ]
}

demo10：抽离冗余的公共代码

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

module.exports = {
       entry:{
        main:'./src/js/main.js',
        user:['./src/js/login.js','./src/js/regin.js'],
        index:['./src/js/index.js']
    },
    output: {
        path: __dirname + '/build/js',  //输出文件夹
        filename:'[name].js'   //最终打包生成的文件名,但如果写为‘[name].js’ 表示将entry各自生成不合并
    },
    module:{
        loaders: [
            {
                test: /\.css$/,
                loaders: ['style', 'css']
            }　
        ]
    },
    plugins:[
        //动态将上面编译好的js文件导入到以下html文件中并且生成到指定目录
        new HtmlWebpackPlugin({
             filename:__dirname + '/build/html/login.html', 
             template:__dirname + '/src/tpl/login.html',
             hash:true,
             inject:"body",
             chunks:['common','user']  
        }),
         //动态将上面编译好的js文件导入到以下html文件中并且生成到指定目录
        new HtmlWebpackPlugin({
             filename:__dirname + '/build/html/index.html', 
             template:__dirname + '/src/tpl/index.html',
             hash:true,
             inject:"body",
             chunks:['common','index']  
        }),
        new webpack.ProvidePlugin({
            //$:'jquery'   //全局自动加载jquery,这只是演示，正常来说像jquery都是在tpl模板中手动引入cdn的
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name:"common",  //对应entry的对象名称
            chunks:["main","user","index"]
        })
    ]
}

demo11:将webpack的配置动态化

利用gulp动态生成webpack.config.js的entry参数

知识点：读取文件夹或文件，遍历文件夹

目录结构调整：（js放置在modules中，并且建立对应的文件夹）

var gp = require('gulp');
var gulp_webpack = require('gulp-webpack');
var gulp_uglify = require('gulp-uglify');
var webpack = require('webpack');
var webpack_config = require('./webpack.config.js');


gp.task('config',function(){
    var fs = require('fs');
    var config = {};
    var path = "./src/modules/";
    var modules = fs.readdirSync(path);
    modules.forEach( function(e, index) {
        if(e != ".DS_Store")  
        {
            var modules_files = fs.readdirSync(path + e);
            var file_arr = modules_files.map(function(f){
                return path + e + "/" + f;
            })
            config[e] = file_arr;
        }
    });
    webpack_config.entry = config;
})

gp.task('run',['config'],function()
{
    webpack(webpack_config,function(){

    })
})

demo12: header分离

下载

sudo npm install raw-loader --save-dev

header.inc

<header>
    我是头部
</header>

index.tpl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</head>
<body>
    <%= require('raw!./header.inc') %>

    <h1>我是主页</h1>
</body>
</html>

编译一下即可：gulp run

demo13:利用远程JSON半动态加载新闻头条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</head>
<body>
    <%= require('raw!./header.inc') %>
    
    <div id="hot">
        今日头条：
    <% var json = JSON.parse(require('raw!./../remote/hot.json').replace(/"use strict";/,"").replace(/;/,"").trim()) %>
    <% json.forEach(function(item){ %>
     <a href="<%= item.href %>"><%= item.text %></a>
    <% }) %>
    
    </div>
    <h1>我是主页</h1>
</body>
</html>

gulpfile.js

var gp = require('gulp');
var gulp_webpack = require('gulp-webpack');
var gulp_uglify = require('gulp-uglify');
var webpack = require('webpack');
var webpack_config = require('./webpack.config.js');

//动态配置entry属性
gp.task('config',function(){
    var fs = require('fs');
    var config = {};
    var path = "./src/modules/";
    var modules = fs.readdirSync(path);
    modules.forEach( function(e, index) 
    {
        if(e != ".DS_Store") 
        {
            var modules_files = fs.readdirSync(path + e);
            var file_arr = modules_files.map(function(f){
                return path + e + "/" + f;
            })
            config[e] = file_arr;
        }
    });
    // console.log(modules);console.log(webpack_config.entry);console.log(config);
    webpack_config.entry = config;
})

gp.task('run',['config'],function()
{
    //获取动态json数据
    var req = require('request');
    var fs = require('fs');
    req.get("http://localhost/hot.php",function(err,rep,body){
         fs.writeFileSync('./src/remote/hot.json', body);//console.log(body);
    });

    //加载webpack
    webpack(webpack_config,function(){

    })
})

demo14:学习Sass基础

安装：sudo npm install node-sass gulp-sass --save-dev

知识点：1、@import引用其他css文件

　　　　2、变量的定义：$global_fontcolor:red;

新建一个css全局变量库：vars.scss。注意分号结尾

$global_background:#000;

$global_fontcolor:red;

新建一个global.scss，推荐使用normalize.css作为基础库 https://github.com/necolas/normalize.css/blob/master/normalize.css

*{padding:0px;margin: 0px;}

新建一个index.scss

神坑：@import 后要加分号; 不然会编译报错。（并没有像js那么和谐）

@import './global.scss';
h1{color : blue;}
h2{color:$global_fontcolor;}

gulpfile.js 添加下面一段代码

var sass = require('gulp-sass');
gp.task('sass',function(){
    gp.src("./src/css/index.scss")
    .pipe(sass())
    .pipe(gp.dest('./build/css'))
})

命令行使用:sudo gulp sass

demo15: sass元素嵌套、mixin（函数）、变量计算、颜色函数

1、元素嵌套：

.container
{
    margin:20px auto;

    div
    {
        margin:15px auto;
    }    
}

2、@mixin函数定义

！值得一提的是，@mixin中可以是可以对变量重新赋值的。后续的demo中会给出演示

新建mixin.scss

@mixin center()
{
    text-align:center;
}

@mixin align($v)
{
    text-align:$v;
}

在index.scss中引用，使用@include 函数名(参数)

@import './mixin.scss';

div
{
   @include center();
   @include align(left);
}

3、变量计算

font-size:$global_font_size / 2;

4、颜色函数　http://www.mamicode.com/info-detail-1126451.html

color:lighten($global_color,20%);

demo16 : 通过sass的字符串模板语法#{$XXX} 与 css3的媒体查询@media 结合

@media基本语法补习：

/*当屏幕小于480px像素时*/
@media screen and (max-width:480px)
{
    h1{color:#666;}
}
/*当屏幕大于480px像素时*/
@media screen and (min-width:480px)
{
    h1{color:#333;}
}

var.scss

$xs:'screen and (max-width:480px)';
$sm:'screen and (max-width:750px)';
$md:'screen and (max-width:970px)';
$lg:'screen and (max-width:1170px)';

index.scss

@import './var.scss';

@media #{$xs} 
{
    .container
    {
        color:red;
        font-size:20px;
    }
}

demo17:sass循环

知识点：

1、nth 获取数组某个索引的值

2、length 获取数组长度

3、定义数组 $screen:($xs,$sm,$md,$lg);

4、@for循环

var.scss

$xs-width:480px;
$sm-width:768px;
$md-width:992px;
$lg-width:1200px;



$xs:'screen and (max-width:$xs-width)';
$sm:'screen and (max-width:$sm-width)';
$md:'screen and (max-width:$md-width)';
$lg:'screen and (max-width:$lg-width)';


$screen:($xs,$sm,$md,$lg);
$screen-width:($xs-width,$sm-width,$md-width,$lg-width)

index.scss

@import './var';


@for $i from 1 through length($screen)
{
    @media #{nth($screen, $i)}
    {
        .container 
        {
            width:nth($screen-width,$i) - 18px;
        }
    }
}

编译结果：

@media screen and (max-width: 480px) {
  .container {
    width: 462px; } }

@media screen and (max-width: 768px) {
  .container {
    width: 750px; } }

@media screen and (max-width: 992px) {
  .container {
    width: 974px; } }

@media screen and (max-width: 1200px) {
  .container {
    width: 1182px; } }

demo18 : SASS function函数定义、字符串拼接、append（推荐）

index.scss

@import './var';

@function getxs1()
{
    $res : ();

    @for $i from 1 through 12
    {
        $res : append($res,"col-xs-#{$i}",comma);
    }

    @return $res;
}

@function getxs2()
{
    $result : "";

    @for $i from 1 through 12
    {
        $result : ".col-xs-#{$i}, #{$result}";
    
    }

    @return $result;
}


#{getxs2()}
{
    padding:15px;
}

编译结果：

.col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1 {
  padding: 15px; }

demo19: 拆分和偏移

核心知识点是：

box-sizing: border-box;

它的作用是当定义元素的大小时，自动囊括自身的padding和border。

index.scss

@import './var';


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


@for $i from 1 through 12
{
    .col-xs-#{$i}
    {
        float:left;
        width:100%*($i/12);
    }
    .col-xs-offset-#{$i}
    {
        margin-left:100%*($i/12);
    }
}

转载于:https://www.cnblogs.com/CyLee/p/5713897.html

dicha7140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gulp + webpack + sass 学习

笔记：1、new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码，chunks:['index.js','main.js']另一个作用就是单独生成一个js文件。使用 filename:'index.js' ,作用其实类似于entry。所以不推荐使用2、所有的gulp任务都带一个回调函数。这个回调函数的调用，说明该任务结束了...
复制链接

扫一扫