gulp的安装学习

gulp的安装学习
一直手动构建和写代码,直接开始用神奇的es6发现有各种不兼容,学习sass来写样式,开始使用gulp,目前我对gulp的使用
编译 sass
合并优化压缩 css
校验压缩 js
优化图片
1、gulp的安装
首先需要安装一下node.js,下载了安装包,安装到C盘,用node -v可以查看是否安装成功;接下来安装gulp 可以用npm install gulp -g进行全局安装,Windows下安装容易出错可以使用镜像安装,并且注意要使用管理员权限去打开命令窗口,如果还是报错建议使用MinGW等工具模拟Linux环境
2、安装好以后,就可以使用gulp命令去创建项目npm init,创建后会生成一个目录,可以看一下生成的package.json中内容,如果需要安装一些插件,可以在这里面配置一下,然后使用npm install 去创建你需要用的模块,当然你也可以初始化后,npm install -xx去创建你需要的插件
3、下面就是gulp插件的使用了,首先你需要创建一个gulpfile.js,里面放的是你使用插件的代码,如果是使用自动创建项目的话,这个也会自动生成。这些插件的使用类似,比如压缩js的插件
var gulp = require(‘gulp’);
var uglify = require(‘gulp-uglify’); //gulp-uglify插件的名称,此处为node-modules中文件夹的名称
gulp.task(‘default’,function(){
console.log(‘hello world’);
});
//font任务,从app复制字体到dist
gulp.task(‘script’, function() { //script为gulp任务名
// 1. 找到文件
gulp.src(‘app/js/getNews.js’) //要压缩的js的路径
// 2. 压缩文件
.pipe(uglify({ mangle: false }))
// 3. 另存压缩后的文件
.pipe(gulp.dest(‘dist/js’)) //压缩后的路径
});
这些插件的语法可以在gulp官网上找到,
4、运行这些gulp任务,作为初学者,我是用webstorm中的gulp插件去运行的:(1)右键gulgfile.js,选择show gulp tasksgulp的安装学习
(2)选择你要运行的任务,点击就能运行
(初学者的一些体会,希望大牛们看见 了不要笑话)