1. Installing gulp
npm install gulp -g
2. cd you project
npm install gulp --save-dev
3.gulp plugins
- Sass compile (gulp-ruby-sass)
- Autoprefixer (gulp-autoprefixer)
- Minify CSS (gulp-minify-css)
- JSHint (gulp-jshint)
- Concatenation (gulp-concat)
- Uglify (gulp-uglify)
- Compress images (gulp-imagemin)
- LiveReload (gulp-livereload)
- Caching of images so only changed images are compressed (gulp-cache)
- Notify of changes (gulp-notify)
- Clean files for a clean build (del)
install:
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
This will install all necessary plugins and save them to devDependencies
inpackage.json
. A full list of gulp plugins can be found here.
4. Load in the plugins
var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'), del = require('del');
相关推荐
精通 gulp 常用插件
定义指令三、gulp常用插件四、gulp常用项目流程操作及部分插件使用方法 一、gulp简介 gulp 是一个基于node的自动化打包构建工具,前端开发者可以使用它来处理常见任务: 搭建web服务器; 文件保存时自动重载浏览器...
前端构建工具gulp使用教程(二)、常用gulp插件以及gulp使用完整实例-附件资源
一个实用的Gulp插件,当将使用时,可以从删除未使用的图标。 FontAwesome 5中包含JavaScript文件可以使捆绑包大小增加约900kb(如果可以访问Pro版本,甚至可以增加> 2.5MB)。 仅包含所需的图标会导致尺寸大幅减少...
Gulp4 +基本插件和实用程序 警告Gulp 4+:在撰写本文时,Gulp 4尚未发布稳定版本,此软件包在此之前不会发布稳定版本。 在认为Gulp 4稳定之前,该程序包将保持在“ alpha”发行版中。 今天如何安装Gulp 4! # ...
gulp常用地址: gulp官方网址: gulp插件地址: gulp 官方API: gulp 中文API: 在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识。首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在...
这个gulp插件将带有模板的html文件转换为js文件,该js文件包含一个以所有模板为字符串的对象。 在结构化HTML文件中编写模板比在一行javascript字符串中编写实用得多。 因此,此插件将带有模板HTML文件转换为js对象...
gulp demo 测试 安装,在根目录下,执行以下命令,安装相关依赖包 CLI命令 cnpm install 运行项目 CLI命令 npm start 开启开发环境调试模式,服务根目录src/ npm run pro 开启生产环境调试模式,服务根目录build/...
通过 npm npm install gulp-onejs-build --save-dev安装插件 将它添加到你的 gulpfile.js 并注册所有的 gulp 任务 var gulp = require ( 'gulp' ) ; var karma = require ( 'karma' ) . server ; var oneJsBuild = ...
Gulp是一款自动构建工具,需要在Node.js的环境下运行,常用的API方法并不多,很快就能熟记,用到的大部分功能都是依靠插件来完成的。 安装: 安装全局gulp:npm i gulp -g 在磁盘上创建新文件夹,用来表示当前项目...
这是Fractal ( )的gulp插件实用程序包。 var gutil = require('gulp-util') 我正在使用.log方法记录此工作流中的错误情况。 ### gulpjs / gulp-coffee #### src: : 这是Fractal ( )编写的coffeescript...
有用的NPM软件包有用的NPM软件包,您可以在下一个项目中使用它:)Gulp.js软件包包装描述 Gulp的命令行实用程序Gulp插件,用于编译SassGulp插件使您可以将Pug模板编译为HTML或JS Gulp插件,用于连接文件 Gulp插件为...
npm上有很多不错的gulp插件和实用程序,因此,各种需求所需的大多数静态资源转换/转换/捆绑都可以通过现有的插件和模块来完成。 您可以利用这些丰富的生态系统来构建满足您特定需求的静态站点生成器,并可以自动化...
该模块提供了两个实用程序方法getMd5Value(file)和getMd5Promise(file) ,插件作者可以将其用作提取MD5哈希的常用方法。 它还提供了一个gulp插件,可以在流中的较早位置缓存MD5哈希。 两种实用程序方法都不需要...
强类型的 TypeScript 开发体验和维护项目上相比 JavaScript ...基于 gulp 搭建开发编译环境,gulp-typescript 插件用于编译 typescript 文件, gulp-nodemon 则可以监控文件内容的变更,自动编译和重启node服务,提升
–使用JS插件转换样式的工具。Javascript(ES6) –捆绑所有依赖项。 –用于编写下一代JavaScript的编译器。 –用于JavaScript和JSX的可插入的实用程序。 – JavaScript解析器,压缩器,压缩器或美化器工具箱。杂 ...
Angular 延迟加载模块示例应用程序 这个示例项目演示了如何在 Angular 应用程序中...###Ensure 节点工具和 gulp 插件是最新的: $ npm install 将安装package.json文件中定义的依赖项 确保前端依赖项已安装或最新:
WordPress 一个干净的 Wordpress 核心从 wp-content 目录中分离出来一个新的 wp-config.php 文件常用插件重力形式优步菜单构建工具鲍尔波旁酒整洁的吞咽德尔自动前缀缓存连接htmlmin 图像最小jshint 重新加载缩小CSS...
然后全局安装gulp: $ npm install -g gulp接下来,在每个样本的目录内,从每个样本的目录内运行以下命令以安装所有依赖项: $ npm installl这应该安装gulp和几个gulp插件。 之后,可以在命令中使用gulp $ gulp这会...