基于Node.js的JavaScript项目构建工具gulp的使用教程

npm install gulp --save-dev

什么是gulp?

gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。

gulp和grunt的异同点

易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。

高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。

高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。

易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。

因为gulp是用node.js写的,所以你需要在你的终端上安装好npm。npm是node.js的包管理器,所以先在你的机子上安装好node.js吧。

gulp安装命令

sudo npm install -g gulp

在根目录下新建package.json文件

npm init .

安装gulp包

安装好后再次输入gulp -v查看版本号,如下图显示则为成功:

安装插件

安装常用插件:

sass的编译                  (gulp-ruby-sass)

自动添加css前缀              (gulp-autoprefixer)

压缩css                    (gulp-minify-css)

js代码校验                  (gulp-jshint)

合并js文件                  (gulp-concat)

压缩js代码                  (gulp-uglify)

压缩图片                    (gulp-imagemin)

自动刷新页面                 (gulp-livereload)

图片缓存,只有图片替换了才压缩  (gulp-cache)

更改提醒                    (gulp-notify)

清除文件                    (del)

安装这些插件需要运行如下命令:

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

以上是 基于Node.js的JavaScript项目构建工具gulp的使用教程 的全部内容, 来源链接: utcz.com/z/356000.html

回到顶部