在这之前,我已经分享过一个webpack的全系列,相对于webpack, gulp使用和配置起来非常的简单.
gulp是什么?
gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”
一、安装gulp与压缩js文件
命令:
npm install gulp -g
npm install gulp --save-dev
初始化项目package.json的配置:npm init --yes
创建项目的目录结构
- demo2
- -----dist
- -----src
- -css
- -img
- -js
- -----gulpfile.js
- -----package.json
在js目录下新建文件( lib.js )
- var Oper = {
- add: function(n1, n2) {
- return n1 + n2;
- },
- sbb: function(n1, n2) {
- return n1 - n2;
- }
- }
安装压缩js的插件: npm install gulp-uglify --save-dev,
然后在gulpfile.js中,输入任务处理代码
- var gulp = require( 'gulp' );
- var uglify = require( 'gulp-uglify' );
- gulp.task('min-js', function() {
- gulp.src('src/js/*.js')
- .pipe( uglify() )
- .pipe( gulp.dest('dist/js') );
- });
- 定义任务,第一个参数是任务名,第二个参数是任务内容。
- gulp.task(name, fn)
- 选择文件,传入参数是文件路径。
- gulp.src(path)
- 输出文件
- gulp.dest(path)
- 管道,你可以暂时将 pipe 理解为将操作加入执行队列
- gulp.pipe()
在命令行执行任务: gulp min-js
就会在 dist/js/lib.js 生成压缩文件
- var Oper={add:function(n,r){return n+r},sbb:function(n,r){return n-r}};
在demo2目录下创建index.html,输入以下测试代码
- <script src="./dist/js/lib.js"></script>
- <script>
- alert( Oper.add( 100, 200 ) );
- </script>
发现压缩好的lib.js文件是可以正常使用的
二、压缩css文件
安装插件: npm install gulp-clean-css --save-dev
demo2/src/css下新建文件style.css
- html,
- body {
- margin: 0;
- padding: 0;
- }
- li {
- list - style - type: none;
- }
- a {
- text - decoration: none;
- color: #666;
- }
在gulpfile.js文件中添加压缩css的任务
- var gulp = require( 'gulp' );
- var uglify = require( 'gulp-uglify' );
- var cleanCSS = require( 'gulp-clean-css' );
- gulp.task('min-js', function() {
- gulp.src('src/js/*.js')
- .pipe( uglify() )
- .pipe( gulp.dest('dist/js') );
- });
- gulp.task('min-css', function() {
- gulp.src('src/css/*.css')
- .pipe( cleanCSS() )
- .pipe( gulp.dest('dist/css') );
- });
然后在命令行执行gulp min-css任务 就会在dist/css生成style.css压缩文件
- 1 body,html{margin:0;padding:0}li{list-style-type:none}a{text-decoration:none;color:#666}
三、编译less文件
安装插件:npm install gulp-less --save-dev
在src/css下面新建style.less文件
- @c1 : green;
- @c2 : red;
- div {
- width:200px;
- height:200px;
- background:@c1;
- div {
- background:@c2;
- transition:all ease 1s;
- }
- }
gulpfile.js中添加任务:
- var gulp = require( 'gulp' );
- var uglify = require( 'gulp-uglify' );
- var cleanCSS = require( 'gulp-clean-css' );
- var less = require('gulp-less');
- gulp.task('min-js', function() {
- gulp.src('src/js/*.js')
- .pipe( uglify() )
- .pipe( gulp.dest('dist/js') );
- });
- gulp.task('min-css', function() {
- gulp.src('src/css/*.css')
- .pipe( cleanCSS() )
- .pipe( gulp.dest('dist/css') );
- });
- gulp.task( 'compile-less', function(){
- gulp.src( 'src/css/*.less' )
- .pipe( less() )
- .pipe( gulp.dest( 'dist/less' ) );
- } );
执行任务: gulp compile-less,在dist/less中生成style.css文件
- div {
- width: 200px;
- height: 200px;
- background: green;
- }
- div div {
- background: red;
- transition: all ease 1s;
- }
四、合并js文件
安装插件:npm install gulp-concat --save-dev
demo2/src/js新建lib2.js文件:
- function $(id) {
- return document.getElementById(id);
- }
在gulpfile.js中新增任务:
- var gulp = require( 'gulp' );
- var uglify = require( 'gulp-uglify' );
- var cleanCSS = require( 'gulp-clean-css' );
- var less = require('gulp-less');
- var concat = require('gulp-concat');
- gulp.task('min-js', function() {
- gulp.src('src/js/*.js')
- .pipe( uglify() )
- .pipe( gulp.dest('dist/js') );
- });
- gulp.task( 'concat-file', function(){
- gulp.src( 'src/js/*.js' )
- .pipe( concat('all.min.js') )
- .pipe( uglify() )
- .pipe( gulp.dest( 'dist/js' ) );
- } );
- gulp.task('min-css', function() {
- gulp.src('src/css/*.css')
- .pipe( cleanCSS() )
- .pipe( gulp.dest('dist/css') );
- });
- gulp.task( 'compile-less', function(){
- gulp.src( 'src/css/*.less' )
- .pipe( less() )
- .pipe( gulp.dest( 'dist/less' ) );
- } );
执行任务:gulp concat-file
在dist/js下面生成all.min.js文件
- 1 function $(n){return document.getElementById(n)}var Oper={add:function(n,t){return n+t},sbb:function(n,t){return n-t}};
五、自动监测文件变化,执行任务
- gulp.task( 'auto', function(){
- gulp.watch( 'src/js/*.js', ['min-js'] );
- gulp.watch( 'src/css/*.css', ['min-css'] );
- } );
- gulp.task( 'default', ['auto'] );
这里添加了一个默认任务default: 执行auto任务,auto里面自动监测压缩js和压缩css任务
在命令行直接执行gulp.
要执行其他任务,只需要按照这几步就可以了:
1,安装响应的插件
2,添加响应的任务
3,执行任务
来源: http://www.cnblogs.com/ghostwu/p/7516133.html