参考链接:https://www.kancloud.cn/thinkphp/gulp-guide/43994
#安装gulp
gulp是基于Node.js的前端构建工具,所以首先需要安装nodejs。
nodejs安装:http://tzhennan.iteye.com/admin/blogs/2410483
#nodejs安装成功之后,使用npm安装全局gulp
$ npm install -g gulp
#在项目根目录下安装本地gulp
$ npm install -g gulp --save-dev
安装成功后在项目根目录下会多出 node_modules 文件夹
#gulp本身不提供js压缩合并等功能,需要使用gulp的相关插件
1、css压缩:gulp-clean-css
2、js压缩:gulp-uglify
3、js合并:gulp-concat
4、重命名:gulp-rename
5、js代码检测:gulp-jshint
6、图谱压缩:gulp-imagemin
#在项目根目录下执行命令安装以上插件
$ npm install gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-imagemin --save-dev
$ npm install jshint gulp-jshint --save-dev
ps:gulp-jshint和jshnt要一起安装
安装好的插件会出现在上面提到的node_modules文件夹中
#使用gulp
在gulpfile.js中添加以下代码
var gulp = require('gulp'),
cleanCSS = require('gulp-clean-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
imageMin = require('gulp-imagemin');
//语法检查
gulp.task('jshint', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//压缩css
gulp.task('minifycss', function() {
return gulp.src('css/*.css') //需要操作的文件
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(cleanCSS({compatibility: 'ie7'})) //执行压缩
.pipe(gulp.dest('css-min')); //输出文件夹
});
//压缩,合并 js
gulp.task('minifyjs', function() {
return gulp.src('js/*.js') //需要操作的文件
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('js')) //输出到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('js-min')); //输出
});
gulp.task('image',function(){
gulp.src('images/*.*')
.pipe(imageMin({progressive: true}))
.pipe(gulp.dest('images-min'))
})
//默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task('default',['jshint'],function() {
gulp.start('minifycss','minifyjs');
});
#在项目根目录下执行gulp命令:
$ gulp
[20:43:30] Using gulpfile ~/project/html/gulpfile.js
[20:43:30] Starting 'jshint'...
[20:43:30] Finished 'jshint' after 60 ms
[20:43:30] Starting 'default'...
[20:43:30] Starting 'minifycss'...
[20:43:30] Starting 'minifyjs'...
[20:43:30] Finished 'default' after 3.24 ms
[20:43:30] Finished 'minifycss' after 134 ms
[20:43:30] Finished 'minifyjs' after 132 ms
现在可以在css-min文件夹中看到压缩好的css文件,在js-min中可以看到合并压缩好的main.min.js 。任务完成,只需要将html中css,js引用的路径修改成新的路径即可。
相关推荐
gulp是基于Nodejs的自动任务运行器,它能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤...
gulp-image-data-uri 口香糖 gulp-minify-css 吞咽净化 手表 浏览器同步 Gulp任务 gulp css :将sass编译为css +缩小 gulp js :concat +缩小脚本 gulp img :压缩图像 gulp html :缩小html gulp sync :...
gulp-start一个gulp搭建的自动化构建系统,可以直接上手用的工程介绍gulp-start是一款用于快速搭建前端工程化的项目,可以快速上手,工程化包括对sass、JavaScript、image的资源压缩与打包主要用到的 gulp包列表如下...
SASS (CSS preprocessor) 图像压缩和转Base64 (Images compress & save base64 image) 移动端自适应 JS压缩 (JavaScript compressor) 热加载 (Hot reload) 一套环境多项目共存 (Multi-Project Builds)
这个分支是使用了rjs作为打包方式,打包配置文件在conf/gulp.rjs.conf.js中, 实现了公共模块与业务模块分离,最大限度优化性能。 也是基于gulp+requirejs+arttemplate+jquery+express的前后端分离的响应式web项目,...
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些...
save base64 image)JS压缩 (JavaScript compressor)热加载 (Hot reload)一套环境多项目共存 (Multi-Project Builds)ES6转换 (Babel)自动添加CSS前缀 (Autoprefixer)移动端适配方案 (Pixels / Rem / Viewport
gulp开发环境搭建 注意gulp4并不向下兼容旧版本,但大部分API仍然可以使用 sass自动编译 ...# 打包产品代码(压缩JS,HTML,CSS,image) npm run build # 打包产品代码 & 开启dist服务 npm run product
开发过程3.1建造项目框架bower约会第三方依赖npm初始化管理项目编写gulp文件文件,确定js,html,less / css,image等文件结构;源文件,编译后运行文件,编译后生产文件(压缩出来)。 var gulp = require('gulp');...
Gulp 是基于 NodeJS 的前端自动化构建工具,在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务,项目中的所有依赖包如下图所示...
JS和CSS缩小; CSS类混淆; 布局标准化。好处脱机工作; 使用压缩算法Brotli; 支持HTTP / 2; 能够安装Web应用程序; 移动设备支持。在MacOS上安装 安装Node.js 安装npm -gi gulp && npm i -g bower在Windows上安装...
--phantomjs The task to generate the image. --readme The task to update readme. --updatestargazers The task to update the count of the stargazers. 为什么? 大家是否想过:...
更全面的构建功能(runtime-chunk、postcss、sass、less、gulp图片压缩、bundle分析、TS、vue-ts、react等). 更高的扩展性,构建目标html快速定义、重写机制、cdnURL定制等. 更活跃、稳定的更新等. 基于实际工作流...