安装 Node

nodejs.org 根据系统选择性按照教程安装Node。

创建项目

  • 创建项目文件夹

  • 进入项目文件夹

  • 初始化项目

使用npm命令:npm init,根据提示完成。

安装 Gulp

进入项目文件夹,使用Node的包管理命令npm进行安装.

  • 全局安装

npm install -g gulp
  • 项目依赖中安装

npm install --save-dev gulp

创建Gulp配置文件

  • 在项目根目录新建配置文件gulpfile.js

设置配置信息

以常见的Gulp插件为例,如下:

  1. js代码校验(gulp-jshint)

  2. 合并js文件(gulp-concat)

  3. 压缩js代码(gulp-uglify)

  4. sass的编译(gulp-sass)

  5. less的编译(gulp-less)

  6. 压缩css(gulp-minify-css)

  7. 重命名(gulp-rename)

这些插件的安装命令如下:

 
npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename --save-dev

完整配置文件:

// 引入 gulp
var gulp = require('gulp'); // 引入组件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename'); // 检查js脚本
gulp.task('lint', function() {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 合并,压缩js文件
gulp.task('scripts', function() {
gulp.src('./src/js/*.js')
//合并js文件
.pipe(concat('all.js'))
//给文件添加.min后缀
.pipe(rename({ suffix: '.min' }))
//压缩脚本文件
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
}); // 编译sass
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
}); // 编译less
gulp.task('sass', function() {
gulp.src('./src/less/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
}); // 压缩css
gulp.task('style', function() {
gulp.src('./src/css/*.css')
.pipe(gulp.dest('./dist/style'))
.pipe(rename('all.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('./dist/style'));
}); // 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts'); // 监听文件变化
gulp.watch('./src/js/*.js', function(){
gulp.run('lint', 'scripts');
});
gulp.watch('./src/sass/*.scss', function(){
gulp.run('sass');
});
gulp.watch('./src/less/*.less', function(){
gulp.run('less');
});
gulp.watch('./src/css/*.css', function(){
gulp.run('style');
});
});

最新文章

  1. VS创建MVC出错解决方法
  2. js动态加载以及确定加载完成的代码
  3. WinSCP无法连接 ubuntu 的解决方法
  4. 25+ Useful Selenium Web driver Code Snippets For GUI Testing Automation
  5. java_method_stringUtils
  6. 谈谈 Google 的 Test Certified
  7. cdoj 1334 郭大侠与Rabi-Ribi Label:贪心+数据结构
  8. CSS3实现背景颜色渐变
  9. C#中小数点后保留两位小数,四舍五入的函数及使用方法
  10. ASP.NET MVC 5入门小结
  11. linux 复制文件时,报cp: omitting directory `XXX'
  12. c# 基础连接已经关闭: 连接被意外关闭,错误的解决
  13. C 真正理解二级指针
  14. 开源API测试工具 Hitchhiker v0.7更新 - Schedule的对比diff
  15. MAC MAMP 中安装配置使用 ThinkPHP
  16. Web Deploy 发布网站错误 检查授权和委派设置
  17. mybatis注解SQL
  18. 实现RunOnUiThread和RunOnUiThreadBlock
  19. tensorflow o. 到 tensorflow 1. 部分改变
  20. css3 媒体查询常用适配

热门文章

  1. DNS学习笔记之DNS理论知识
  2. [课程设计]Scrum 1.2 Spring 计划&系统流程&DayOne燃尽图
  3. Oracle学习笔记(二)
  4. Centos7的安装、Docker1.12.3的安装,以及Docker Swarm集群的简单实例
  5. 中转Http请求
  6. Xcode插件安装 错选了Skip Bundle解决办法
  7. 菜单伸缩Js控制
  8. [wxWidgets] 2. 重访“Hello World” 程序
  9. IOS开发 strong,weak,retain,assign,copy nomatic 等的区别与作用
  10. golang