glup工具使用

àì夳堔傛蜴生んèń 2022-09-28 13:05 13阅读 0赞

参考： [http://www.jianshu.com/p/3f2e13442555][http_www.jianshu.com_p_3f2e13442555]

[https://segmentfault.com/a/1190000005170434][https_segmentfault.com_a_1190000005170434]

gulp API： [http://www.gulpjs.com.cn/docs/api/][http_www.gulpjs.com.cn_docs_api]

1、全局安装gulp：

npm install gulp -g

gulp -v 测试安装是否成功

2、配置项目： 创一个gulp文件夹作为项目根目录，项目结构如下：

![SouthEast][]

![Image 1][]

配置package.json文件，有三种方法：

可以用记事本之类的创建一个

用npm init建

也可以复制之前项目的创建好的package.json

用npm init 的方法来创建package.json 在终端将当前目录切换至项目所在目录（gulp），然后输入npm init，一路回车，最终在项目根目录下生成package.json:

"name": "gulp\_test", /\*项目名,切记这里命名不要与模块一样，如命名为gulp，要地安装gulp时就会出错\*/

"version": "1.0.0", /\*版本号\*/

"description": "", /\*描述\*/

"main": "index.js",

"scripts": \{

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

\},

"author": "", /\*作者\*/

"license": "ISC" /\*项目许可协议\*/

3、本地安装gulp：

npm install gulp --save-dev

\--svae-dev 的作用就是将刚才安装的模块写入package.json中

全局安装，为的是能在端终运行gulp任务的，本地安装是项目级别的安装，将真正的gulp模块安装到项目的node\_modules/下了，后面的插件都是依赖gulp模块的

4、本地安装gulp插件：

主要插件： 编译Sass ( [gulp-ruby-sass][] )； Autoprefixer ( [gulp-autoprefixer][] )； 缩小化(minify)CSS ( [gulp-minify-css][] )； JSHint ( [gulp-jshint][] )； 拼接 ( [gulp-concat][] )； 丑化(Uglify) ( [gulp-uglify][] )； 图片压缩 ( [gulp-imagemin][] )； 即时重整(LiveReload) ( [gulp-livereload][] )； 清理档案 ( [gulp-clean][] )； 图片快取，只有更改过得图片会进行压缩 ( [gulp-cache][] )； 更动通知 ( [gulp-notify][] )

npm install --save-dev gulp-uglify gulp-concat gulp-minify-css

5、 在项目根目录下创建gulpfile.js文件

附录：gulp插件：

无依赖的

*  [del][]: Delete files/folders using globs.
 *  [opn][]: A better node-open. Opens stuff like websites, files, executables. Cross-platform.
 *  [psi][]: PageSpeed Insights for Node.
 *  [wiredep][]: Wire Bower dependencies to your source code.
 *  [browser-sync][]: Live CSS Reload & Browser Syncing.
 *  [require-dir][]: Helper to require() directories.
 *  [run-sequence][]: Run a series of dependent gulp tasks in order.

### gulp辅助 ###

*  [gulp][]: The streaming build system.
 *  [gulp-if][]: Conditionally run a task.
 *  [gulp-cache][gulp-cache 1]: A cache proxy task for Gulp.
 *  [gulp-changed][]: Only pass through changed files.
 *  [gulp-filter][]: Filter files in a vinyl stream.
 *  [gulp-replace][]: A string replace plugin for gulp.
 *  [gulp-flatten][]: remove or replace relative path for files.
 *  [gulp-useref][]: Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
 *  [gulp-load-plugins][]: Automatically load any gulp plugins in your package.json.

### gulp plugins for css ###

*  [gulp-autoprefixer][gulp-autoprefixer 1]: gulp-autoprefixer.
 *  [gulp-uncss][]: Remove unused CSS selectors.
 *  [gulp-csso][]: Minify CSS with CSSO.
 *  [gulp-less][]: Less for Gulp.

### gulp plugins for scripts ###

*  [gulp-jshint][gulp-jshint 1]: JSHint plugin for gulp.
 *  [jshint-stylish][]: Stylish reporter for JSHint.

### gulp plugins for compress ###

*  [gulp-concat][gulp-concat 1]: Concatenates files.
 *  [gulp-imagemin][gulp-imagemin 1]: Minify PNG, JPEG, GIF and SVG images.
 *  [gulp-minify-html][]: Minify html with minimize.
 *  [gulp-minify-css][gulp-minify-css 1]: Minify css with clean-css.
 *  [gulp-uglify][gulp-uglify 1]: Minify files with UglifyJS.
 *  [gulp-size][]: Display the size of your project.

### 测试相关 ###

*  [karma][] 自动测试插件
 *  [karma-Chrome-launcher][]: 调用Chrome进行测试

### 待选 ###

*  gulp-livereload
 *  gulp-autowatch

[http_www.jianshu.com_p_3f2e13442555]: http://www.jianshu.com/p/3f2e13442555
[https_segmentfault.com_a_1190000005170434]: https://segmentfault.com/a/1190000005170434
[http_www.gulpjs.com.cn_docs_api]: http://www.gulpjs.com.cn/docs/api/
[SouthEast]: /images/20220708/4bc7263ea6d04829a172e3ddc37571e2.png
[Image 1]: 
[gulp-ruby-sass]: https://github.com/sindresorhus/gulp-ruby-sass
[gulp-autoprefixer]: https://github.com/Metrime/gulp-autoprefixer
[gulp-minify-css]: https://github.com/jonathanepollack/gulp-minify-css
[gulp-jshint]: https://github.com/wearefractal/gulp-jshint
[gulp-concat]: https://github.com/wearefractal/gulp-concat
[gulp-uglify]: https://github.com/terinjokes/gulp-uglify
[gulp-imagemin]: https://github.com/sindresorhus/gulp-imagemin
[gulp-livereload]: https://github.com/vohof/gulp-livereload
[gulp-clean]: https://github.com/peter-vilja/gulp-clean
[gulp-cache]: https://github.com/jgable/gulp-cache/
[gulp-notify]: https://github.com/mikaelbr/gulp-notify
[del]: https://www.npmjs.org/package/del
[opn]: https://www.npmjs.org/package/opn
[psi]: https://www.npmjs.org/package/psi
[wiredep]: https://www.npmjs.org/package/wiredep
[browser-sync]: https://www.npmjs.org/package/browser-sync
[require-dir]: https://www.npmjs.org/package/require-dir
[run-sequence]: https://www.npmjs.org/package/run-sequence
[gulp]: https://www.npmjs.org/package/gulp
[gulp-if]: https://www.npmjs.org/package/gulp-if
[gulp-cache 1]: https://www.npmjs.org/package/gulp-cache
[gulp-changed]: https://www.npmjs.org/package/gulp-changed
[gulp-filter]: https://www.npmjs.org/package/gulp-filter
[gulp-replace]: https://www.npmjs.org/package/gulp-replace
[gulp-flatten]: https://www.npmjs.org/package/gulp-flatten
[gulp-useref]: https://www.npmjs.org/package/gulp-useref
[gulp-load-plugins]: https://www.npmjs.org/package/gulp-load-plugins
[gulp-autoprefixer 1]: https://www.npmjs.org/package/gulp-autoprefixer
[gulp-uncss]: https://www.npmjs.org/package/gulp-uncss
[gulp-csso]: https://www.npmjs.org/package/gulp-csso
[gulp-less]: https://www.npmjs.org/package/gulp-less
[gulp-jshint 1]: https://www.npmjs.org/package/gulp-jshint
[jshint-stylish]: https://www.npmjs.org/package/jshint-stylish
[gulp-concat 1]: https://www.npmjs.org/package/gulp-concat
[gulp-imagemin 1]: https://www.npmjs.org/package/gulp-imagemin
[gulp-minify-html]: https://www.npmjs.org/package/gulp-minify-html
[gulp-minify-css 1]: https://www.npmjs.org/package/gulp-minify-css
[gulp-uglify 1]: https://www.npmjs.org/package/gulp-uglify
[gulp-size]: https://www.npmjs.org/package/gulp-size
[karma]: http://karma-runner.github.io/0.10/index.html
[karma-Chrome-launcher]: https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/gulp-plugins.html