基本 NPM,Gulp 设置
Basic NPM, Gulp Setup
我正在尝试自动化我的前端开发,所以我开始使用 NPM 引入依赖项。我的 package.json
看起来像:
"main": "main.js",
"dependencies": {
"jquery": "^2.1.4",
"vue": "^0.12.8"
},
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-browserify": "^0.5.1",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.0",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.2.0"
}
我的 gulpfile.json
看起来像:
var gulp = require('gulp'),
sass = require('gulp-sass'),
minify_css = require('gulp-minify-css'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
var src = {
sass: 'assets/sass/',
js: 'assets/js/',
};
var output = {
css: 'public/css/',
js: 'public/js/',
};
gulp.task('css', function () {
return gulp.src(src.sass + 'main.scss')
.pipe(sass())
.pipe(autoprefix('last 10 version'))
.pipe(minify_css())
.pipe(rename({basename: 'styles'}))
.pipe(gulp.dest(output.css))
.pipe(notify('CSS processed.'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('js', function () {
return gulp.src([
src.js + 'main.js',
])
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest(output.js))
.pipe(notify('JS processed.'));
});
gulp.task('watch', function () {
browserSync.init({server: './output'});
gulp.watch(src.sass + '**/*.scss', ['css']);
gulp.watch(src.js + '**/*.js', ['js']);
gulp.watch(src.js + '**/*.js', ['js']);
});
gulp.task('default', ['css', 'js', 'watch']);
有效!太棒了!
我想开始在 main.js
中编写代码,但是 我遇到的问题是弄清楚如何 require
jQuery 和 Vue(以及其他任何东西) ) 到我的 main.js
文件.
(编辑:不一定要在 main.js
文件中完成,我只希望最终结果是我可以按预期编写代码并将其缩小。看来我可以't require('jquery')
在 gulp js 任务中,但也许我做错了。)
由于您只为 build/workflow 使用节点,因此您不会在应用程序代码中调用节点的导出(希望如此)。所以简短的回答是,不管你以前是怎么做的。
编辑:我看到您用 browserify 标记了问题。如果您尝试使用 browserify 请求,那么您需要做的是 gulp 任务 运行 browserify 命令,它将处理您的依赖项。 Node 的 require,也就是您当前在 gulp 文件中调用的内容,是另一种动物。它用于确保您拥有所需的所有软件包,但您需要 运行 浏览器验证,以便您的应用代码中的要求能够正常工作。
我正在尝试自动化我的前端开发,所以我开始使用 NPM 引入依赖项。我的 package.json
看起来像:
"main": "main.js",
"dependencies": {
"jquery": "^2.1.4",
"vue": "^0.12.8"
},
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-browserify": "^0.5.1",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.0",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.2.0"
}
我的 gulpfile.json
看起来像:
var gulp = require('gulp'),
sass = require('gulp-sass'),
minify_css = require('gulp-minify-css'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
var src = {
sass: 'assets/sass/',
js: 'assets/js/',
};
var output = {
css: 'public/css/',
js: 'public/js/',
};
gulp.task('css', function () {
return gulp.src(src.sass + 'main.scss')
.pipe(sass())
.pipe(autoprefix('last 10 version'))
.pipe(minify_css())
.pipe(rename({basename: 'styles'}))
.pipe(gulp.dest(output.css))
.pipe(notify('CSS processed.'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('js', function () {
return gulp.src([
src.js + 'main.js',
])
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest(output.js))
.pipe(notify('JS processed.'));
});
gulp.task('watch', function () {
browserSync.init({server: './output'});
gulp.watch(src.sass + '**/*.scss', ['css']);
gulp.watch(src.js + '**/*.js', ['js']);
gulp.watch(src.js + '**/*.js', ['js']);
});
gulp.task('default', ['css', 'js', 'watch']);
有效!太棒了!
我想开始在 main.js
中编写代码,但是 我遇到的问题是弄清楚如何 require
jQuery 和 Vue(以及其他任何东西) ) 到我的 main.js
文件.
(编辑:不一定要在 main.js
文件中完成,我只希望最终结果是我可以按预期编写代码并将其缩小。看来我可以't require('jquery')
在 gulp js 任务中,但也许我做错了。)
由于您只为 build/workflow 使用节点,因此您不会在应用程序代码中调用节点的导出(希望如此)。所以简短的回答是,不管你以前是怎么做的。
编辑:我看到您用 browserify 标记了问题。如果您尝试使用 browserify 请求,那么您需要做的是 gulp 任务 运行 browserify 命令,它将处理您的依赖项。 Node 的 require,也就是您当前在 gulp 文件中调用的内容,是另一种动物。它用于确保您拥有所需的所有软件包,但您需要 运行 浏览器验证,以便您的应用代码中的要求能够正常工作。