zoukankan      html  css  js  c++  java
  • gulp入门-压缩js/css文件(windows)

    类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

    工具/原料

    • nodejs/npm

    方法/步骤

    1. 首先要确保pc上装有node,然后在global环境和项目文件中都install gulp

      npm install gulp -g   (global环境)

      npm install gulp --save-dev (项目环境)

       
    2.  

      在项目中install需要的gulp插件,一般只压缩的话需要

      npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

      更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins/

      注:gulp-minify-css(css压缩)、 gulp-concat(文件合并)、 gulp-uglify(js压缩)、 gulp-rename(重命名文件)

    3.  

      在项目的根目录新建gulpfile.js,require需要的module

      var gulp = require('gulp'),
      
          minifycss = require('gulp-minify-css'),
      
          concat = require('gulp-concat'),
      
          uglify = require('gulp-uglify'),
      
          rename = require('gulp-rename'),
      
          del = require('del');
    4.  压缩css
      gulp.task('minifycss', function() {
      
          return gulp.src('src/*.css')      //压缩的文件
      
              .pipe(gulp.dest('minified/css'))   //输出文件夹
      
              .pipe(minifycss());   //执行压缩
      
      });
    5.  压缩js
      gulp.task('minifyjs', function() {
      
          return gulp.src('src/*.js')
      
              .pipe(concat('main.js'))    //合并所有js到main.js
      
              .pipe(gulp.dest('minified/js'))    //输出main.js到文件夹
      
              .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
      
              .pipe(uglify())    //压缩
      
              .pipe(gulp.dest('minified/js'));  //输出
      
      });
    6.  执行压缩前,先删除文件夹里的内容
      gulp.task('clean', function(cb) {
      
          del(['minified/css', 'minified/js'], cb)
      
      });
    7.  默认命令,在cmd中输入gulp后,执行的就是这个命令
      gulp.task('default', ['clean'], function() {
      
          gulp.start('minifycss', 'minifyjs');
      
      });
    8.  然后只要cmd中执行,gulp即可
  • 相关阅读:
    gcc各个版本下载
    加减法运算解决乘除法
    蚂蚁碰撞的概率
    ns2.34移植leach协议
    ubantu16.04安装ns2.34 错误
    ubantu安全卸载火狐浏览器
    post和get的区别
    docker加速配置阿里云镜像
    重装系统后,会因为本机保存的公匙不对报错
    集合 set
  • 原文地址:https://www.cnblogs.com/qshting/p/5512479.html
Copyright © 2011-2022 走看看