zoukankan      html  css  js  c++  java
  • gulp打包工具

    首先安装全局gulp

    $ npm install --global gulp

    下载成功后

    新建一个项目或者一个文件夹(做测试)

    mkdir testgulp

    在该文件或者项目下下载gulp工具

    $ npm install --save-dev gulp  //  yarn add gulp --save-dev

    出现这样的代码就表示文件tetsgulp里面下载成功 

    再在项目的根目录下新建一个js文件gulpfile.js

    在js 文件 引入 gulp 

    var gulp = require('gulp');
    

      再压缩你要压缩的文件的文档

    一下是js和css文件压缩的例子

    
    

    var gulp = require("gulp");
    var uglify = require('gulp-uglify');

    
    


    gulp.task('gmc', function () {
    // gulp.src(['js/*.js','!js/*.min.js']) //获取文件,同时过滤掉.min.js文件
    gulp.src('*.js') //获取文件,同时过滤掉.min.js文件
    .pipe(uglify())
    .pipe(gulp.dest('js/')); //输出文件
    });

    
    

    var minify = require('gulp-minify-css');

    
    

    gulp.task('cssmini', function () {
    gulp.src('*.css') //要压缩的css
    .pipe(minify())
    .pipe(gulp.dest('css/'));
    });

     接下来在node.js跑

    下面还有自动化压缩(监听)

    var gulp = require("gulp");
    var uglify = require('gulp-uglify');
    
    
    gulp.task('gmc', function () {
    //  gulp.src(['js/*.js','!js/*.min.js'])  //获取文件,同时过滤掉.min.js文件
        gulp.src('*.js')  //获取文件,同时过滤掉.min.js文件
            .pipe(uglify())
            .pipe(gulp.dest('js/'));  //输出文件
    });
    
    var minify = require('gulp-minify-css');
    
    gulp.task('cssmini', function () {
        gulp.src('*.css')  //要压缩的css
            .pipe(minify())
            .pipe(gulp.dest('css/'));
    });
    
    gulp.task("watchjs",function(){
       gulp.watch('*.js', ['gmc']);
       gulp.watch('*.css', ['cssmini']);
    });
    附加链接:gulp自动化工具大全https://www.jianshu.com/p/98db023b5b89
  • 相关阅读:
    git 获取之前某个版本
    mysql默认查询顺序
    tp5链式查询fetchSql(true)方法
    微信中关闭网页输入内容时的安全提示
    SourceTree + BeyondCompare 配置 + 使用教程
    SourceTree 免登录跳过初始设置
    git 常规发布流程
    Git常用操作命令
    手动安装phpRedisAdmin
    docker-compose快速搭建lnmp+redis服务器环境
  • 原文地址:https://www.cnblogs.com/clj9291/p/10025583.html
Copyright © 2011-2022 走看看