gulp压缩js

⑴ gulp构建工具的几个使用技巧

这里并不讲什么 gulp 及其其插件的安装，此前的文章已经提到过了。这里主要用来记录一下，gulp构建工具的一些简单常用的用法。
最有用的Gulp插件汇总
1）假如我们想使用gulp压缩js文件并合并js文件，应如何操作呢？
使用gulp-uglify和gulp-concat插件，gulpfile.js 大致如下：
/**
* Created by DreamBoy on 2016/8/19.
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('concat', function() {
// 你的默认的任务代码放在这
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});

gulp.task('default', ['concat']);

// 在命令行中运行 gulp
/*
默认的名为default的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入gulp <task> <othertask>。
*/
更加详细的用法可以参考：gulp教程之gulp-uglify

⑵ Nodejs之gulp用法总结

一、nodeJS基础操作

    (一)、安装nodeJS (node -v)

    (二)、npm 包管理工具  (cnpm安装 ：  npm install gulp -g)

    (三)、在项目中初始化package.json  (nodejs的配置文件,在项目中安装的模块,会记录在package.json)  npm init

    (四)、在其他位置需要配置相关模块时，只需把pageage.json拷贝过来，执行 npm install,即可自动安装所需模块

二、gulp

    1. 安装 (gulp -v)

        (1)全局安装  npm i gulp -g

        (2)本地安装：  npm i gulp --save-dev

    2. 在项目根目录创建 gulpfile.js

    3. gulp.task()    gulp.src()  gulp.pipe()  gulp.dest()  gulp.watch()

    4. gulp插件：  (1)压缩css  (2)压缩js  (3) 合并js  (4) 压缩图片 (5)自动添加前缀 autoprefixer  (6)sass编译  （7）热刷新

⑶ 前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)

@ TOC

阅读本文章之前，相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了，那么他们之间究竟有什么区别呢？

gulp文档上面有这么一句话 ，也就是说 gulp是一个自动化构建工具；
gulp的一些功能如下(包括但不限于):

其实Webpack和另外两个并没有太多的可比性

傻瓜式起步照搬官网文档
1.安装

2.在项目根目录下创建一个名为 gulpfile.js 的文件：

3.运行 gulp：

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档

新建一个项目gulp-test
环境:

1.新建文件以下文件如下

其中 gulpfile.js 是我们gulp的配置文件，启动gulp默认会找个这个文件并执行；
2.接下来安装依赖

一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了

安装依赖

这里页面实时刷新只讲这个 gulp-connect ，其他详情可以参照 Browsersync 和文章 gulp-livereload

安装完依赖后配置gulpfile.js如下:

大概讲解一下gulpfile.js:

gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务（task）
如上我们定义了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任务，其中:

my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下；

my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下；

html 是将 符合所提供的匹配模式的html进行监听，如果有变化则connect.reload()

clean 是如果任务重新启动时 删除旧文件；

default gulp默认启动的任务

watch gulp的api 监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

server 依赖gulp-connect启动一个服务器

配置完gulpfile.js之后，我们给js和css及html加点东西:

首先js/helloworld.js

css/index.scss

index.html

运行gulp

浏览器效果:

接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:

按保存之后，终端给我们报了一个错:

查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法，有问题解决问题，es6=>es5

解决方案:
安装gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

运行

依然报上面的错；找了一些原因发现，虽然安装了相关依赖，却没有配置.babelrc文件，即babel还没转化es6

根目录添加.babelrc文件

重新运行:

查看dist下的js文件

改变helloworld.js检查页面是否刷新

保存，页面的天空蓝换成你们喜欢的yellow颜色

修改index.scss 查看是否会刷新页面

最后修改index.html 查看是否会刷新页面

今天主要学习了gulp的简单项目搭建及实时更新配置；其实gulp类似于grunt的弱化版，但更简单好用，只是插件会少一些，目前主流的项目搭建工具主要是webpack，但依然有不少项目还用着gulp或者grunt

扩展:

下面还有一些楼主的学习笔记:

有兴趣的可以多多交流@ 楼主博客

⑷ gulp怎么压缩html js css 混合的文件

合并和压缩JS、CSS文件
压缩JS，CSS文件需要引用如下组件：
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹
gulp-notify:提示
安装组件项目目录，通过cd 进入项目的根目录，执行下边的npm安装组件
npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

⑸ js文件 压缩成一个 是怎么弄的

gulp + webpack/browserify
用gulp加上webpack或者browserify来完成。js之间使用require相互引用，然后在gulpfile里面设置把所有文件整合输出并uglify

⑹ gulp压缩js的时候出现如下错误提示 events.js 141，求大神解答！

感觉上是你有代码在产生错误输出而且没有被处理。能把具体错误的那个文件的代码发一下吗？

⑺ gulp压缩js失败，虽然执行成功了，但是没有生成结果求大神解答

楼主,你这个问题解决了吗?

⑻ gulp压缩整站方法（html/css/js/image）

注入package.json(此json文件需要自己在当前项目目录下创建即可--不能有注释)安装：

npm install gulp-uglify --save-dev

全局安装：

npm install gulp-uglify -g

整站静态文件压缩配置文件gulpfile.js（html/css/image/js; 前提是安装下列require用到的模块）：

var gulp = require('gulp'),//基础库

    htmlmin = require('gulp-htmlmin'),//html压缩

cssmin = require('gulp-minify-css'),//css压缩

jshint = require('gulp-jshint'),//js检查

uglify = require('gulp-uglify'),//js压缩

imagemin = require('gulp-imagemin'),//图片压缩

    pngquant = require('imagemin-pngquant'),//图片深入压缩

imageminOptipng = require('imagemin-optipng'),

    imageminSvgo = require('imagemin-svgo'),

    imageminGifsicle = require('imagemin-gifsicle'),

    imageminJpegtran = require('imagemin-jpegtran'),

domSrc = require('gulp-dom-src'),

cheerio = require('gulp-cheerio'),

processhtml = require('gulp-processhtml'),

Replace = require('gulp-replace'),

cache = require('gulp-cache'),//图片压缩缓存

clean = require('gulp-clean'),//清空文件夹

conCat = require('gulp-concat'),//文件合并

plumber=require('gulp-plumber'),//检测错误

gutil=require('gulp-util');//如果有自定义方法，会用到

var date = new Date().getTime();

gulp.task('clean',function(){

return gulp.src('min/**',{read:false})

.pipe(clean());

});

function errrHandler( e ){

    // 控制台发声,错误时beep一下

    gutil.beep();

    gutil.log(e);

this.emit('end');

}

gulp.task('cleanCash', function (done) {//清除缓存

    return cache.clearAll(done);

});

gulp.task('htmlmin', function () {

    var options = {

        removeComments: true,//清除HTML注释

        collapseWhitespace: true,//压缩HTML

        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

        minifyJS: true,//压缩页面JS

        minifyCSS: true//压缩页面CSS

    };

    gulp.src(['index/*.htm','index/*.html'])

.pipe(plumber({errorHandler:errrHandler}))

.pipe(Replace(/_VERSION_/gi, date))

.pipe(processhtml())

        .pipe(htmlmin(options))

        .pipe(gulp.dest('min'));

});

gulp.task('cssmin', function(){

    gulp.src('index/**/*.css')

.pipe(conCat('css/index.min.css'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cssmin({

            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]

            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

            keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]

            keepSpecialComments: '*'

            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀

        }))

        .pipe(gulp.dest('min'));

});

gulp.task('jsmin', function () {

    gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])

.pipe(conCat('js/index.min.js'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(uglify({

            mangle: {except: ['require' ,'exports' ,'mole' ,'$']},//类型：Boolean 默认：true 是否修改变量名

            compress: true,//类型：Boolean 默认：true 是否完全压缩

            preserveComments: 'false' //保留所有注释

        }))

        .pipe(gulp.dest('min'));

}); 

gulp.task('imagemin', function () {

    gulp.src('index/**/*.{png,jpg,gif,ico}')

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cache(imagemin({

            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片         

svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性

            use: [pngquant(),imageminJpegtran({progressive: true})

            , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件         

        })))

        .pipe(gulp.dest('min'));

});

gulp.task('default',['clean'],function(){

gulp.start('cssmin','htmlmin','jsmin','imagemin');

});

package.json(例子) package.json详细介绍：https://docs.npmjs.com/files/package.json

（package.json  npm init 命令行创建文件方法http://blog.csdn.net/liyanhui1001/article/details/44020235 ）

{

  "name": "web",

  "version": "1.0.0",

  "description": "my text",

  "main": "gulpfile.js",

  "dependencies": {

    "gulp": "^3.9.1",

    "gulp-cache": "^0.4.5",

    "gulp-concat": "^2.6.0",

    "gulp-htmlmin": "^2.0.0",

    "gulp-imagemin": "^3.0.1",

    "gulp-jshint": "^2.0.1",

    "gulp-minify-css": "^1.2.4",

    "gulp-plumber": "^1.1.0",

    "gulp-uglify": "^1.5.4",

    "gulp-util": "^3.0.7",

    "imagemin-pngquant": "^5.0.0",

    "jshint": "^2.9.2",

    "gulp-clean": "^0.3.2"

  },

  "devDependencies": {

    "gulp-cheerio": "^0.6.2",

    "gulp-dom-src": "^0.2.0",

    "gulp-jslint": "^1.0.1",

    "gulp-processhtml": "^1.1.0",

    "gulp-rename": "^1.2.2",

    "gulp-replace": "^0.5.4",

    "gulp-webpack": "^1.5.0",

    "imagemin-gifsicle": "^5.1.0",

    "imagemin-jpegtran": "^5.0.2",

    "imagemin-optipng": "^5.1.1",

    "imagemin-svgo": "^5.1.0",

    "webpack": "^1.13.1"

  },

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "web"

  ],

  "author": "yl",

  "license": "ISC"

}

devDependencies里的内容即为你安装gulp的模块插件名称和版本号！

最后，node.js里指定到当前项目目录下输入gulp命令即可：

gulp default

⑼ gulp压缩js以后再怎么操作

1.css压缩 gulp-minify-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：
4.重命名 gulp-rename
5.js代码检测 gulp-jshint (或gulp-jslint)