在less文件引入另外一个less

转载

mob64ca1400bfa8 2024-10-18 12:03:09

文章标签 在less文件引入另外一个less 前端 ViewUI gulp css 文章分类 架构后端开发

gulp的使用命令简单，就几个，gulp的简单使用教材可以参考一点的gulp使用教材

下面就简单的介绍这些命令如何互相配合的完成前端的构建工作。

项目结构：

在less文件引入另外一个less_css

首先全局安装gulp，使用命令：npm install -g gulp

一：gulp实时编译less

var gulp = require('gulp');
var gulpLess = require('gulp-less');
var gulpMinifyCss = require('gulp-minify-css');
var gulpSourcemaps = require('gulp-sourcemaps');

　　这4个插件就是目前用到的，需要其他功能可以自己添加。gulp-less是编译less用的插件，gulp-minify-css是压缩css的插件，gulp-sourcemaps是便于压缩后代码调试的。

gulp.task('allLess', function(){
    gulp.src('src/less/**/*.less')
        .pipe(gulpSourcemaps.init())//sourcemaps
        .pipe(gulpLess())//编译less
        .pipe(gulpSourcemaps.write())
        .pipe(gulp.dest('src/css/'))
        .pipe(gulpMinifyCss())//压缩css
        .pipe(gulpSourcemaps.write())
        .pipe(gulp.dest('dist/css/'));
});

gulp.watch('src/less/**/*.less', ['allLess']);

gulp.task('default', ['allJs', 'allLess']);

gulp.src('src/less/**/*.less')：src/less/下任意目录下的less文件，**代表任意单个或多个目录，*.less表示已less后缀结尾的文件。

gulp.watch('src/less/**/*.less', ['allLess']);这条是监听src/less目录下的任意less文件的变化，有变化就会调用allLess任务编译变化的less文件。

　gulp实时编译less就是这么简单了。还可以加入对图片的压缩控制。

二：gulp压缩合并requirejs加载的js模块文件

在前端代码量越来越多的情景下，js模块化编程孕育而生，AMD模式的模块采用requirejs来加载模块。模块化编程让前端js代码规范整洁之外，也导致了浏览器对

js请求数量增多，这个时候，就需要对相应的模块进行合并，并且压缩代码，减少请求，缩短页面响应时间。

一些需要的模块：

var fs = require('fs');
var paths = require('path');
var rjs = require('requirejs');

合并压缩用的是requirejs的optimize方法,

先定义一些变量：

// 配置目录
var jsDir = 'src/js';


// 所有要编译的js模块
var jsModules = [], ctrlModules = [],
    commModules = [
        {
            name: "lib/common",
            exclude: []
        }
    ];

合并压缩代码的思路就是要告诉requirejs哪些模块需要合并到文件中，哪些模块要单独打包，不用合并到文件中，并且单独请求。也就是要先遍历你的逻辑js文件，

把名称和需要过滤的模块名称存到变量中，然后传递给requirejs的optimize方法。下面是变量controller下的js文件。

// 初始化controller下所有要编译的js模块
function initJsPath(path){
    path = path || jsDir + '/controller';
    var files = fs.readdirSync(path);/*读取目录下的所有文件名称，返回名称数组，如果文件名是目录，该目录下面的文件不会读取*/
    console.log(files);
    files.forEach(function(item) {
        var tmpPath = path + '/' + item,
            stats = fs.statSync(tmpPath);
        if (stats.isDirectory()) {//目录
            initJsPath(tmpPath);
        } else {//文件
            if (tmpPath.slice(-3)=='.js') {
                ctrlModules.push({
                    name: tmpPath.slice(jsDir.length + 1, -3),
                    exclude: ['lib/common']
                });
            }
        }
    });
    console.log(ctrlModules);
}

gulp中定义的任务是：

gulp.task('allJs', function(cb){
    console.log('======================================= start optimize js ==========================================');
    //收集js文件名称
    initJsPath();

    jsModules = commModules.concat(ctrlModules);

    rjs.optimize({
        baseUrl: 'src/js',
        dir: 'dist/js',
        findNestedDependencies : false,   //代码内部写的require也计算在打包内
        preserveLicenseComments : false,  //去掉头部版权声明
        removeCombined: false,            //自动删除被合并过的文件
        modules: jsModules
    }, function(){
        cb();
    }, cb);

});

baseUrl目录下的文件都会被压缩，modules中的模块会被合并并且压缩，合并压缩后存储到dist/js目录下面。commModules中存储的是我们项目的公共模块文件，

需要单独合并压缩抽离出来，这个文件不会被合并到其他模块文件中，而且会被单独请求。相关参数的配置信息大家可以看官网。

下面看看实验:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    window.ENV = 1;
</script>
<body>
<p class="msg">hello rjs</p>
</body>
<script src="src/js/require.js"></script>
<script>
    require(['src/js/config.js'], function(){
        require(['controller/order/orderDetail']);
    });
</script>
</html>

requirejs 的config配置文件：

/**
 * Created by jiaan.zhou on 2017/2/3.
 */

var BASEURL = ((window.ENV == 1) || (window.ENV == 2 && location.hash === '#debugon')) ? 'src/js': 'dist/js';

require.config({
    waitSeconds: 2000,
    baseUrl : BASEURL,
    paths : {},
    urlArgs : 'v=' + new Date().getTime()
});

没有合并的orderDetai.js文件：

/**
 * Created by jiaan.zhou on 2017/2/3.
 */
define('controller/order/orderDetail', ['widget/swipe'], function(widgetSwipe){
    console.log('controller/order/orderDetail');
    $('.msg').html('success');
});

合并后的orderDetai.js文件：

define("widget/swipe",["lib/common"],function(e){function o(){this.name="swipe",console.log("hello swipe")}return new o}),define("controller/order/orderDetail",["widget/swipe"],function(e){console.log("controller/order/orderDetail"),$(".msg").html("success")});

没有合并模块之前的请求：

在less文件引入另外一个less_ViewUI_02