zoukankan      html  css  js  c++  java
  • 学写网站(二)前端配置之glup

    前端使用gulp来自动化开发流程。

    gulp会非常方便进行前端管理。

    安装gulp:

    npm install gulp -g #将gulp安装至全局

    因为在本地需要使用require的方式gulp。因此也需要在本地安装一份:

    npm install gulp --save-dev  #将gulp安装至本地,并保存至package.json

    以上的--save-dev是将安装的包的添加到package.json下的devDependencies依赖中。以后通过npm install即可自动安装。devDependencies这个是用来记录开发环境下使用的包,如果想要记录生产环境下使用的包,那么在安装包的时候使用npm install xx --save就会记录到package.json下的dependencies中,dependencies是专门用来记录生产环境下的依赖包的!

    创建gulp任务:

    要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个gulpfile.js文件。然后在gulpfile.js中填入以下代码:

    var gulp = require("gulp")
    
    gulp.task("greet",done=> {
        console.log('hello world');
    
    done();
    });

      

    通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的,不能引用全局下的。require语法是node.js独有的,只能在node.js环境下使用。

    gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字,第二个参数是一个函数,就是执行这个命令的时候会做什么事情,都是写在这个里面的。

    函数结束后 ,要使用done()来告知gulp

    写完以上代码后,以后如果想要执行greet命令,那么只需要进入到项目所在的路径,然后终端使用gulp greet即可执行。

    4. 创建处理css文件的任务:

    gulp只是提供一个框架给我们。如果我们想要实现一些更加复杂的功能,比如css压缩,那么我们还需要安装一下gulp-cssnano插件。gulp相关的插件安装也是通过npm命令安装,安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包)。
    css文件的处理,需要做的事情就是压缩,然后再将压缩后的文件放到指定目录下(不要和原来css文件重合了)!这里我们使用gulp-cssnano来处理这个工作:

    npm install gulp-cssnano --save-dev

    然后在gulpfile.js中写入以下代码:

    var gulp = require("gulp")
    var cssnano = require("gulp-cssnano")
    
    // 定义一个处理css文件改动的任务
    gulp.task('css',done=>{
        gulp.src('../static/css/*.css')
        .pipe(cssnano())
            .pipe(gulp.dest('../static'));
        done();
    });

    以上对代码进行详细解释:

    gulp.task:创建一个css处理的任务。

    gulp.src:找到当前css目录下所有以.css结尾的css文件。

    pipe:管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano

    gulp.dest:将处理完后的文件,放到指定的目录下。不要放在和原文件相同的目录,以免产生冲突,也不方便管理。

    5. 修改文件名:

    像以上任务,压缩完css文件后,最好是给他添加一个.min.css的后缀,这样一眼就能知道这个是经过压缩后的文件。这时候我们就需要使用gulp-rename来修改了。当然首先也需要安装npm install gulp-rename --save-dev。示例代码如下:

    var gulp = require("gulp")
    var cssnano = require("gulp-cssnano")
    var rename = require("gulp-rename")
    gulp.task("css",function () {
        gulp.src("./css/*.css")
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest("./css/dist/"))
    });

    在上述代码中,增加了一行.pipe(rename({"suffix":".min"})),这个我们就是使用rename方法,并且传递一个对象参数,指定修改名字的规则为添加一个.min后缀名。这个gulp-rename还有其他的指定文件名的方式,比如可以在文件名前加个前缀等。更多的教程可以看这个:https://www.npmjs.com/package/gulp-rename

    6. 创建处理js文件的任务:

    处理js文件,我们需要使用到gulp-uglify插件。安装命令如下:

    npm install gulp-uglify --save-dev

    安装完后,我们就可以对js文件进行处理了。示例代码如下:

    var gulp = require("gulp")
    var rename = require("gulp-rename")
    var uglify = require('gulp-uglify');
    gulp.task('script',done=>{
        gulp.src(path.js + '*.js')
        .pipe(uglify())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('js/'));
    done();
    });

    这里就是增加了一个.pipe(uglify())的处理,对js文件进行压缩和丑化(修改变量名)等处理。

    如果想要压缩全局变量,可以添加参数
    ‘toplevel’:true

    即:uglify({‘toplevel’:true})

    自动删除代码中的console语句:

    {‘compress’:{

    ‘drop_console’:true}}

    更多关于gulp-uglify的教程。请看:https://github.com/mishoo/UglifyJS2#minify-options

    7. 合并多个文件:

    在网页开发中,为了加快网页的渲染速度,有时候我们会将多个文件压缩成一个文件,从而减少请求的次数。要拼接文件,我们需要用到gulp-concat插件。安装命令如下:

    npm install gulp-concat --save-dev

    比如我们现在有一个nav.js文件用来控制导航条的。有一个index.js文件用来控制首页整体内容的。那么我们可以使用以下代码将这两个文件合并成一个文件

    var gulp = require('gulp');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    gulp.task('vendorjs',done=>{
        gulp.src([
            './js/nav.js',
            './js/index.js'
        ])
        .pipe(concat('index.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
    done();
    });
    
    
    

    8. 压缩图片:

    图片是限制网站加载速度的一个主要原因。图片越大,从网站上下载所花费的时间越长。因此对于一些图片,我们可以采取无损压缩,即在不改变图片质量的基础之上进行压缩。在gulp中我们可以通过gulp-imagemin来帮我们实现。安装命令如下:

    npm install gulp-imagemin --save-dev

    压缩图片也是一个比较大的工作量,对于一些已经压缩过的图片,我们就没必要再重复压缩了。这时候我们可以使用gulp-cache来缓存那些压缩过的图片。安装命令如下:

    npm install gulp-cache --save-dev

    两个插件结合使用的代码如下:

    var imagemin = require('gulp-imagemin');
    var cache = require('gulp-cache');
    gulp.task('image',done=>{
        gulp.src("./images/*.*")
        .pipe(cache(imagemin()))
        .pipe(gulp.dest('dist/images/'));
    done();
    });

    9. 检测代码修改,自动执行任务:

    以上所有的任务,我们都是需要手动的在终端去执行。这样很不方便我们开发。最好的方式就是我修改了代码后,gulp会自动的执行相应的任务。这个工作我们可以使用gulp内置的watch方法帮我们完成:

    var gulp = require("gulp")
    var cssnano = require("gulp-cssnano")
    var rename = require("gulp-rename")
    
    // 定义一个处理css文件改动的任务
    gulp.task("css",done=> {
        gulp.src("./css/*.css")
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest("./css/dist/"))
        .pipe(connect.reload());
    done();
    });
    
    // 定义一个监听的任务
    gulp.task("watch",done=>{
        // 监听所有的css文件,然后执行css这个任务
        gulp.watch("./css/*.css",['css']);
    done();
    });

    以后只要在终端执行gulp watch命令即可自动监听所有的css文件,然后自动执行css的任务,完成相应的工作。

    10. 更改文件后,自动刷新浏览器:

    以上我们实现了更改一些css文件后,可以自动执行处理css的任务。但是我们还是需要手动的去刷新浏览器,才能看到修改后的效果。有什么办法能在修改完代码后,自动的刷新浏览器呢。答案是使用browser-syncbrowser-sync安装的命令如下:

    npm install browser-sync --save-dev

     

    browser-sync使用的示例代码如下:

    var gulp = require("gulp")
    var cssnano = require("gulp-cssnano")
    var rename = require("gulp-rename")
    var bs = require("browser-sync").create()
    
    gulp.task("bs",done=> {
        bs.init({
            'server': {
                'baseDir': './'
            }
        });
    done();
    });
    
    // 定义一个处理css文件改动的任务
    gulp.task("css",done=> {
        gulp.src("./css/*.css")
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest("./css/dist/"))
        .pipe(bs.stream()) //刷新当前页面
    done();
    });
    
    // 定义一个监听的任务
    gulp.task("watch",done=> {
        gulp.watch("./css/*.css",['css'])
    done();
    });
    
    // 执行gulp server开启服务器
    gulp.task("server",['bs','watch'])

    以上我们创建了一个bs的任务,这个任务会开启一个3000端口,以后我们在访问html页面的时候,就需要通过http://127.0.0.1:3000的方式来访问了。然后接下来我们还定义了一个server任务。这个任务会去执行bswatch任务,只要修改了css文件,那么就会执行css的任务,然后就会自动刷新浏览器。
    browser-sync更多的教程请参考:http://www.browsersync.cn/docs/gulp/

  • 相关阅读:
    resin实现热部署配置
    tomcat实现域名访问步骤
    springboot学习笔记2---配置拦截器:
    springboot学习笔记2:搭建web项目
    springboot学习笔记1:springboot入门
    重识maven
    shiro学习笔记:remeberMe,多次登录锁死账号
    shiro学习笔记:授权管理
    springmvc定时任务及RequestBody注解
    springmvc处理异常
  • 原文地址:https://www.cnblogs.com/ohahastudy/p/10984280.html
Copyright © 2011-2022 走看看