gulp做简单的js压缩

安装工具

全局安装npm install --global gulp

项目的依赖安装npm install --save-dev gulp
npm install --save-dev gulp-rename
npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat

在要压缩的src目录下创建gulpfile.js

var gulp = require(‘gulp‘);
var rename = require(‘gulp-rename‘);
var uglify = require(‘gulp-uglify‘);
var concat = require(‘gulp-concat‘);

//建立一个名为jsmin的任务
gulp.task(‘min‘,function(){
    return gulp.src(‘src/**/*.js‘)             //压缩src目录下(**表示子目录)的所有.js文件,
        .pipe(concat(‘all.js‘))
        .pipe(gulp.dest(‘src‘))                //输出新文件
        .pipe(uglify())                     //压缩文件
        .pipe(rename({extname:‘.min.js‘}))    //重命名
        .pipe(gulp.dest(‘src‘))             //执行压缩后保存的文件夹
});

//建立一个默认执行的任务
gulp.task(‘default‘,[‘min‘])

结果获得一个未压缩的all.js和已经压缩的all.min.js

时间: 2024-11-13 16:54:06

gulp做简单的js压缩的相关文章

gulp-uglify《JS压缩》----gulp系列(四)

本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img)和输出目录(build->img)的配置: 2.gulp->tasks里新建JS任务,如下图: 3.同时在default任务序列里添加js任务: gulp.task('default', ['less', 'images', 'js', 'watch']); 4.最后在watch里添加对src-&

gulp教程(sass,livereload,md5,css压缩,js压缩,img的base64)

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

gulp css html image js 合并压缩

安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引入gulp组件 // 引入组件//在引入这些组件前你需要在你的项目里进行安装.举个栗子:组件中间用空格隔开.一定要先切换到你项目所在的目录 //npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-d

日常填坑--gulp build出错 error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". 以及js压缩错误

1.想通过babel-node让后端node可以运行es6,结果装完babel-cli总是报错Requires Babel "^7.0.0-0", but was loaded with "6.26.3" yarn add @babel/cli @babel/core @babel/node @babel/preset-env -D 参考链接 https://segmentfault.com/q/1010000017876791/   要看具体的版本号,可以去 pa

gulp的简单应用

下面是使用gulp压缩 scss&js 文件的简单应用: //gulpfile.js名字必须是这个//这儿文件告诉gup工具,具体要做那些事情 //1.引入gulp模块//var gulp = require('gulp'); //2.告诉gulp去执行某个任务// gulp.task("task.name",function(){// //do something// // });// gulp.task("bacon",function(){// con

gulp的简单使用(MAC OX 系统)

1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: sudo npm install -global gulp-cli 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--save-dev:(可以不执行) npm install --save-dev gulp 这样就

区域及分离、Js压缩、css、jquery扩展

后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离.

26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离. 1.右键单击Web项目,“添加”——“区域”,区域名,

gulp的简单使用

1.在你的项目目录下安装package.json(请先看看自己有没有安装nodejs) npm install 2.根据需求调节gulpfile.js(gulpfile.js如下,可根据需求删除与添加) // lastUpdateDate: 2016.09 .17 // description: gulp是通过构建一个个任务机械化的帮我们完成重复性质的工作 'use strict' // 在gulpfile中先载入gulp包,因为这个包提供了一些API var gulp = require('g