gulp学习笔记

          很久没有写博客,现在写博客是空闲下来的时候记录一下学习心得或者说叫做过程吧。

反正写了就是当自己回过头来看的时候看见自己在前端道路上的成长轨迹也是挺开心的,有时候还能给初学者一点借鉴吧!

         运用用gulp到自己的项目中,步骤如下:

          1、安装nodejs,这个安装需要过程,详情自行了解,这里一笔带过;

          2、安装好nodejs之后,键盘按键win+R,输入cmd运行;

          3、输入cnpm -g --registry=https://registry.npm.taobao.org回车;

          4、全局安装gulp,即输入cnpm install -g gulp;

          5、再切换到项目目录下,比如现在是在c盘目录,那么输入d:回车就切换到了d盘,再输入cd test即切换到了test目录下,再次安装gulp,输入cnpm install gulp;

          6、新建一个名为gulpfile.js的文件到自己项目目录下,即

1     var gulp = require('gulp'),
2     minifycss = require('gulp-minify-css'),  //CSS压缩
3     concat = require('gulp-concat'),         // 文件合并
4     uglify = require('gulp-uglify'),         //js压缩插件
5     rename = require('gulp-rename');         // 重命名

7、下载所需插架gulp-minify-css、gulp-concat、gulp-uglify和gulp-rename,运用例如cnpm install gulp-minify-css即可下载;

8、在gulpfile.js中编写如下所示代码:

1  gulp.task('default',function() {
2     return gulp.src('src/*.css')         //压缩的文件
3         .pipe(minifycss())                   //执行压缩
4         .pipe(gulp.dest('dist/css'));        //输出文件夹
5 });

注意下目录,‘src/*.css'这里意思是你所要压缩的css路径,’dist/css'是压缩完要存放的路径。

9、在所在目录下运行gulp即可压缩你的css文件了。

最后,引言“gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascriptcoffeesasslesshtml/imagecss 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。”

嗯,gulp还是挺好的一款代码构建工具!除了这个还有grunt,有待慢慢了解消化了。

猜你喜欢

转载自www.cnblogs.com/cyppi/p/9391934.html